QML ScrollView Scroll to Bottom

Question

I have a scrollview where Uart data comes into a text field. I I want the text field to be scrolled all the way down as soon as new data comes in. Unfortunately I did not find out how to do this.

Here's what I tried: Page2Form.ui.qml:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Page {
    width: 600
    height: 400
    property double scrollPosition
    ScrollView {
       id: scrollviewUart
       ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
       ScrollBar.vertical.policy: ScrollBar.AlwaysOn
       ScrollBar.vertical.position: scrollPosition
       Layout.fillHeight: true
       Layout.fillWidth: true
       TextArea {
           id: textAreaUartRx
           anchors.fill: parent
           text: uartTextRx.text
       }
    }

}

Page2.qml:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Page2Form {
    textAreaUartRx.onTextChanged: {
        scrollPosition : 1 //also 0 does not change
    }
}

In this case, however, the scroll field always jumped to the top. How do I do this correctly?

shoehorn shoehorn · Accepted Answer · 2020-08-21T18:35:22

You are setting the variable, but never resetting the scrollbar position. Do this: scrollviewUart.ScrollBar.vertical.position = scrollPosition

QML ScrollView Scroll to Bottom

1 Answers