使QT/QML TextArea滚动到底部

Yan*_*ick 6 qt qml qt5

我在 QT/QML 5.11 上遇到了这样一个简单的事情,我几乎认为库中存在一个错误。

我有以下代码:

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" }
    }
}
Run Code Online (Sandbox Code Playgroud)

基本上,TextArea 的文本链接到“menu_view.pwrcon.text”,该文本在 Python 代码中进行了更改(它是一个属性)。当文本更改时,我希望它将可滑动设置到文本的底部,以便我们看到最近添加的行。

所以我这样做

txflick.contentY = txarea.contentHeight - txflick.height
Run Code Online (Sandbox Code Playgroud)

当 onTextChanged() 事件被触发时。没有问题,我检查了数字,没有问题(手动滚动到 console.log() 显示的数字显示 contentY 计算是正确的)。

但似乎组件(可轻拂的)在我更改 contentY 之后,将其单独更改回 0(此行为仅在文本高度变得大于可轻拂的固定高度之后才会发生)。这实在是太愚蠢了,我怀疑这到底是一个错误还是有意为之。

换句话说,在我计算之后,contentY 在没有我干预的情况下神奇地回到零,这当然破坏了整个事情。

有什么办法可以解决这个问题吗?

小智 6

您可以使用 Flickable 或 ScrollView 来实现它。

将光标位置更改为 TextArea 中将自动聚焦于该行。

在文本区域中创建一个函数,并在每次文本更改时更改焦点。你必须手动调用它

 cursorPosition = length-1
Run Code Online (Sandbox Code Playgroud)

或者你可以直接设置属性

cursorPosition : length-1 
Run Code Online (Sandbox Code Playgroud)

在每次文本更新的 TextArea 块中。

     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++))
             }
        }
Run Code Online (Sandbox Code Playgroud)