记住 QML 元素中的滚动位置

Posted 2023-02-16

【中文标题】记住 QML 元素中的滚动位置

【英文标题】：Remember scroll position in QML element

【发布时间】：2012-06-06 12:58:33

【问题描述】：

我有一些 qml 作为应用程序的输出（有点像只读控制台）。但是，使用起来很烦人，因为它在打印信息时会滚动回顶部。

例如，假设我每秒打印一行到我的TextArea，大约一分钟后，我将有足够的行，我现在有一个滚动条。我滚动到底部，一秒钟后，打印了一行文本，导致它滚动回顶部。

我想要的功能是自动滚动到底部（很像控制台打印内容时的样子），除非用户通过向上滚动来覆盖它，否则文本应该保持不变。我希望这是有道理的，这里有一些代码：

        ScrollArea 
            id: helpTextScrollArea
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: myButton.bottom
            anchors.topMargin: 5
            anchors.bottom: parent.bottom
            visible: false
            horizontalScrollBar.visible: false

            onVisibleChanged: 
                helpText.visible = visible
            

            HelpTextArea 
                id: helpText
                width: parent.parent.width - helpTextScrollArea.verticalScrollBar.width
                text: "Oops, no documentation."

                onVisibleChanged: 
                    if(helpTextScrollArea.visible != visible) 
                        helpTextScrollArea.visible = visible
                    
                
            
        

        Flickable
        
            id: flick

            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: runStopButton.bottom
            anchors.bottom: parent.bottom
            anchors.topMargin: 5


            TextArea

                id: messageArea
                anchors.fill: parent

                focus: true

                readOnly: true

                visible: !helpTextScrollArea.visible

                wrapMode: TextEdit.Wrap

                function addText(newText) 
                    text += newText + "\n"
                
            
        

注意：我认为我的 Flickable 没有任何作用，它是我尝试解决问题的一部分。另外，我使用函数addText 打印到文本区域。我对 qml 几乎一无所知，而且大部分代码都是由其他人编写的，我正在尝试使用它。谢谢！

【参考方案1】：

您可以将Flickable 的contentY 属性绑定到将计算正确位置的表达式。

Flickable 
    id: flick
    states: State 
        name: "autoscroll"
        PropertyChanges 
            target: flick
            contentY: messageArea.height - height
        
    
    onMovementEnded: 
        if (contentY === messageArea.height - height) 
            state = "autoscroll"
        
        else 
            state = ""  // default state
        
    
    // ...

【参考方案2】：

Flickable 在称为 visibleArea.* 中有 4 个只读属性（您可以在 QML 文档中阅读它们的含义）：

visibleArea.xPosition

：xPosition = contentX / contentWidth

visibleArea.yPosition

：yPosition = contentY / contentHeight

visibleArea.widthRatio

: widthRatio = width / contentWidth

visibleArea.heightRatio

: heightRatio = height / contentHeight

【参考方案3】：

如果您使用的是 GridView 而不是 Flickable，则可以使用这些方法。

positionViewAtBeginning()

positionViewAtEnd()

positionViewAtIndex(int index, PositionMode mode)

我发现这些非常有用，因为在添加文本行时，只需调用 GridView 内的positionViewAtEnd() 方法即可。

希望对你有帮助