如何以编程方式将 ScrollView 滚动到底部？答案

【问题标题】：How to programatically scroll a ScrollView to the bottom?如何以编程方式将 ScrollView 滚动到底部？
【发布时间】：2020-10-20 14:21:27
【问题描述】：

我一直在尝试使用 Qt Quick Controls 2 创建一个以编程方式滚动到 ScrollView 底部的函数。我尝试了各种选项，但我在网上找到的大部分支持都是指 Qt Quick Controls 1，而不是 2。这是我尝试过的：

import QtQuick 2.8
import QtQuick.Controls 2.4

ScrollView {
    id: chatView

    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: inputTextAreaContainer.top

    function scrollToBottom() {
        // Try #1
//      chatView.contentItem.contentY = chatBox.height - chatView.contentItem.height
//      console.log(chatView.contentItem.contentY)

        // Try #2
//      flickableItem.contentY = flickableItem.contentHeight / 2 - height / 2
//      flickableItem.contentX = flickableItem.contentWidth / 2 - width / 2

        // Try #3
        chatView.ScrollBar.position = 0.0 // Tried also with 1.0
    }

    TextArea {
        id: chatBox
        anchors.fill: parent
        textFormat: TextArea.RichText
        onTextChanged: {
            // Here I need to scroll
            chatView.scrollToBottom()
        }
    }
}

有谁知道如何使用 Qt Quick Controls 2 来实现这一点？如果没有，是否有人可以替代这种方法？

【问题讨论】：

标签： qt qml qtquick2 qtquickcontrols2

【解决方案1】：

原因

您正在尝试将ScrollBar 的位置设置为1.0：

chatView.ScrollBar.position = 0.0 // Tried also with 1.0

但是，你不考虑它的大小。

解决方案

当您像这样设置其位置时，请考虑ScrollBar 的大小：

chatView.ScrollBar.vertical.position = 1.0 - chatView.ScrollBar.vertical.size

我是如何想出这个解决方案的？

我很好奇Qt本身是如何解决这个问题的，所以我看了一下QQuickScrollBar::increase()是如何实现的，看到了这一行：

setPosition(qMin<qreal>(1.0 - d->size, d->position + step));

然后我取了qMin的第一个参数，即1.0 - d->size，解法就清楚了。

示例

由于您没有提供 MCE，我自己编写了一个。我希望你能适应你的特殊情况。这里是：

import QtQuick 2.8
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.12

ApplicationWindow {
    width: 480
    height: 640
    visible: true
    title: qsTr("Scroll To Bottom")

    ColumnLayout {
        anchors.fill: parent

        ScrollView {
            id: scrollView

            Layout.fillWidth: true
            Layout.fillHeight: true

            function scrollToBottom() {
                ScrollBar.vertical.position = 1.0 - ScrollBar.vertical.size
            }

            contentWidth: children.implicitWidth
            contentHeight: children.implicitHeight
            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
            clip: true

            ColumnLayout {

                Layout.fillWidth: true
                Layout.fillHeight: true

                Repeater {
                    model: 50

                    Label {
                        text: "Message: " + index
                    }
                }
            }
        }

        TextField {
            Layout.fillWidth: true
        }
    }

    Component.onCompleted: {
        scrollView.scrollToBottom()
    }
}

结果

该示例产生以下结果：

【讨论】：