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"
        }
    }