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和保存的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"
        }
    }