qt - QML TextArea 滚动事件

Question

有没有办法知道TextArea滚动何时到达顶部或底部？我想在聊天客户端中实现动态文本加载：当用户滚动到顶部时，更多的文本被添加到文档中。像这样的东西（伪代码）：

import QtQuick 2.4
import QtQuick.Controls 1.2

TextArea {
      id: chat
      onScrolledToTop: text = loadMoreText() + text
}

Answer 1

Textarea继承ScrollView其中有一个Flickable项目来控制可见区域。这样的项目可用作（只读）属性flickableItem。Flickable 提供的其他属性包括contentY：

这些属性保存当前位于 Flickable 左上角的表面坐标。例如，如果您将图像向上滑动 100 像素，则 contentY 将为 100。

因此，您可以检查此属性更改，并在达到某个阈值后更新您的文本。请注意，您应该contentY在设置文本后进行调整，以模拟添加。否则显示的文本将与刚刚添加的文本完全相同。正如 OP 所建议的那样，一个不错的方法是保存原始文件contentHeight并将 设置contentY为更新和保存的之间的差异contentHeight- 同时考虑应用的threshold.

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3

Window {
    visible: true
    width: 400
    height: 200

    TextArea {
        id: chat
        anchors.fill: parent
        property int threshold: 10

        text: "Current\ntext\n\\to\nmove\ndown\ndown\ndown
               \ndown\ndown\ndown\ndown\ndown\ndown\ndown"
        Component.onCompleted: cursorPosition = text.length


        flickableItem.onContentYChanged: {
            if(flickableItem.contentY <= threshold) {
                var oldHeight = flickableItem.contentHeight
                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna
                            aliqua." + text
                flickableItem.contentY = threshold + flickableItem.contentHeight - oldHeight  // leave flickable in old position
            }
        }
    }
}

Answer 2

ScrollView {
        width: root.width - ((root.width/10) * 2) - (root.width/15)*2
        x:  (root.width/10) + root.width/15
        height: root.height - (root.height/5)
        clip: true

        TextArea {
            id: textArea
            clip: true
            width: root.width - ((root.width/10) * 2) - (root.width/15)*2
            height: root.height - (root.height/5)
            wrapMode: "WrapAtWordBoundaryOrAnywhere"
            placeholderText: "inter description"
        }
    }