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

4

3 回答 3

3

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

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
        }
    }
    // ...
}
于 2012-06-15T03:17:46.510 回答
2

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

  • visibleArea.xPosition : xPosition = contentX / contentWidth
  • visibleArea.yPosition : yPosition = contentY / contentHeight
  • visibleArea.widthRatio : widthRatio = 宽度 / contentWidth
  • visibleArea.heightRatio : heightRatio = 高度 / contentHeight
于 2012-07-02T02:05:20.430 回答
0

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

positionViewAtBeginning()

positionViewAtEnd()

positionViewAtIndex(int index, PositionMode mode)

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

希望能帮助到你

于 2015-08-18T00:00:12.780 回答