Make QT/QML TextArea scroll to bottom - qt

Question

I'm having this hard time with QT/QML 5.11 over such a simple thing I almost think there's a bug in the library at this point.
I have the following code:
Flickable {
id: txflick
anchors.top: title_label.bottom
anchors.bottom: crect.bottom
anchors.right: crect.right
anchors.left: busy_ind.right
flickableDirection: Flickable.VerticalFlick
onContentYChanged: console.log("contentY_changed", this.contentY)
//contentY: txarea.contentHeight - txarea.height
interactive: false // Has no effect, contentY keeps changing to zero
TextArea.flickable: TextArea {
id: txarea
topPadding: 8
bottomPadding: 10
leftPadding: 10
rightPadding: 10
readOnly: true
text: menu_view.pwrcon.text
onTextChanged: {
console.log("text changed")
txflick.contentY = txarea.contentHeight - txflick.height
console.log("chg", txarea.contentHeight - txflick.height)
console.log(text)
}
onContentHeightChanged: {
console.log("ctheight = ___", contentHeight, height, txflick.height, txflick.contentHeight)
}
font.family: "DejaVu Sans Mono,Ubuntu Sans Mono,Noto Sans Mono"
font.bold: false
font.pixelSize:12
color: "black"
//verticalAlignment: TextInput.AlignTop
background: Rectangle { color: "lightgrey"; radius: 2;
border.width: 1; border.color: "darkgrey" }
}
}
Basically the TextArea's text is linked to "menu_view.pwrcon.text", which is changed in the Python code (it's a property). When the text changes, I want it to set the flickable to the bottom of the text, so that we see the most recently added lines.
So I do
txflick.contentY = txarea.contentHeight - txflick.height
When the onTextChanged() event is fired. No issues there, I checked the numbers and it's fine (scrolling manually to the number shown with console.log() shows the contentY calculation is correct).
But it seems the component (the flickable), just after I change contentY, changes it alone back to 0 (this behavior happens only after the text height becomes bigger than the fixed height of the flickable). It's so genuinely idiotic I question whether it's a bug or intended.
In other words, right after my calculation, contentY goes back magically to zero without my intervention, which of course breaks the whole thing.
Is there anything to fix this issue?

Answer 1

You can achieve it with Flickable or ScrollView.
changing cursor position to in TextArea will focus on that line automatically.
create a function in the text area and change focus each time text changes. You have to call it manually
cursorPosition = length-1
or
you can directly set property
cursorPosition : length-1
in TextArea block on each text update.
ScrollView {
id: scrollView
height: parent.height
width: parent.width
clip: true
anchors.fill: parent
TextArea {
id: statusTextArea
Layout.preferredWidth:parent.width
Layout.fillHeight: true
readOnly: true
textFormat: TextEdit.RichText
text: "Long Text \n"
width: parent.width
height: parent.height
anchors.fill: parent
function append(strAdd)
{
statusTextArea.text = statusTextArea.text + strAdd
statusTextArea.cursorPosition = statusTextArea.length-1
}
}
}
Timer {
running: true
interval: 1000
repeat: true
property int iteration: 0
onTriggered:{
statusTextArea.append("Line %1\n".arg(iteration++))
statusTextArea.append("Line %1\n".arg(iteration++))
}
}

Answer 2

This is my codes, it work pretty well for me.
TextArea {
id: textArea
width: parent.width
height: parent.height
readOnly: true
selectByMouse: true
wrapMode: Text.WordWrap
function append(newText) {
if (textArea.flickableItem.contentHeight - textArea.height <= 0) {
textArea.text = textArea.text + newText
} else {
if (textArea.flickableItem.contentY >= textArea.flickableItem.contentHeight - textArea.height) {
textArea.text = textArea.text + newText
textArea.flickableItem.contentY = textArea.flickableItem.contentHeight - textArea.height
} else {
textArea.text = textArea.text + newText
}
}
}
}
Timer {
running: true
interval: 1000
repeat: true
property int iteration: 0
onTriggered:{
textArea.append("Line %1\n".arg(iteration++))
textArea.append("Line %1\n".arg(iteration++))
}
}