首页 文章

记住QML元素中的滚动位置

提问于
浏览
6

我有一些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几乎一无所知,大部分代码都是由其他人编写的,我正在尝试使用它 . 谢谢!

3 回答

  • 0

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

    positionViewAtBeginning()
    
    positionViewAtEnd()
    
    positionViewAtIndex(int index, PositionMode mode)
    

    我发现这些非常有用,因为当添加文本行时,只需调用 GridView 内的 positionViewAtEnd() 方法 .

    希望能帮助到你

  • 3

    您可以将 FlickablecontentY 属性绑定到将计算正确位置的表达式 .

    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

相关问题