具有ScrollView + TextArea的自定义QML组件：TextArea无法正确滚动

Question

我有一个自定义QML组件，希望用于文本编辑。当我将其添加到我的主应用程序中时，滚动非常...“中断”：滚动条不能反映内容的正确高度，并且在滚动时尺寸会缩小。当我到达示例文本的底部（10个段落）时，它跳回到顶部。怎么了？

Reproducible test case Qt project。这两个QML文件都在下面复制：

自定义窗口小部件（Instance.qml）：

import QtQuick 2.12
import QtQuick.Controls 2.5

ScrollView {
    property string myText

    clip: true
    contentHeight: height
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn

    TextArea {
        id: textArea
        text: myText
        selectByMouse: true
        wrapMode: "WrapAtWordBoundaryOrAnywhere"
        renderType: Text.NativeRendering

        background: Rectangle {
            border.width: 1
            border.color: "black"
        }
    }
}

main.qml：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        id: errorsColumn
        anchors.fill: parent

        ScrollView {
            id: errorsScrollView
            Layout.fillHeight: true
            Layout.fillWidth: true
            clip: true

            contentWidth: parent.width
            contentHeight: errorsRepeaterColumn.height

            Column {
                id: errorsRepeaterColumn
                anchors.left: parent.left
                anchors.right: parent.right
                spacing: 5

                add: Transition {
                    NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; duration: 500 }
                }

                Repeater {
                    model: 10
                    Button {
                        Layout.fillWidth: true
                        Layout.maximumHeight: 300
                        text: "I'm item " + index

                        onClicked: resultsPageEditor.state = "VISIBLE"
                    }
                }
            }
        }

        InstanceEditor {
            id: resultsPageEditor
            myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.

2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.

3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.

4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.

5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.

6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.

7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.

8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.

9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.

10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
            Layout.fillWidth: true
            height: 0

            states: [
                State {
                    name: "HIDDEN"
                    PropertyChanges { target: resultsPageEditor; height: 0 }
                },
                State {
                    name: "VISIBLE"
                    PropertyChanges { target: resultsPageEditor; height: 250 }
                }
            ]
            state: "HIDDEN"

            transitions: [
                Transition {
                    from: "*"; to: "VISIBLE"
                    NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
                },
                Transition {
                    from: "*"; to: "HIDDEN"
                    NumberAnimation { properties: "height"; easing.type: Easing.InBack; duration: 500 }
                }
            ]
        }
    }
}

Answer 1

您应该让ScrollView管理内容的大小。第二个问题是您将Instance放在布局中。您应该使用implicitHeight处理项目的大小。

这应该可以根据需要工作：

Instance {
            id: resultsPageEditor
            myText: "1 Numquam ducimus facilis quo eum perspiciatis sint alias soluta. Sit cupiditate dolorem perspiciatis quia fugit. Voluptas molestiae eius molestiae. Dolorum ipsam ipsum corporis provident nobis.

2 In assumenda suscipit incidunt et quas vero dicta. Ut et dolorem aut. Odio quo eveniet aut soluta harum molestias cumque vel. Nisi quis sed quaerat sapiente eos quaerat qui et. Numquam delectus ad delectus.

3 Enim rem et nihil nobis omnis voluptatem odit sed. Nemo rerum autem ipsa quia non quia. Praesentium molestiae iusto modi sint. Qui laboriosam eum quaerat aut cum perspiciatis. Qui iusto quisquam aut assumenda velit excepturi fugit rerum.

4 Veritatis est ut inventore sed eos. Dolorem perferendis mollitia illum vel dignissimos est. Iste explicabo quidem est.

5 Qui ad qui omnis molestias occaecati dolorum. Corrupti fuga voluptatibus voluptas laboriosam libero et sit. Omnis sed ut quia animi rerum voluptatem. Totam et impedit consequatur excepturi minus. Optio voluptatibus cumque neque sit blanditiis.

6 Autem quam laborum aut illum non nam eius debitis. Dolorem nostrum et molestiae eos. Dolorum architecto praesentium dignissimos corporis dignissimos.

7 Repudiandae autem autem animi. Praesentium exercitationem voluptate fugit voluptas cum voluptas. Perferendis eos aut modi corporis ratione et rerum.

8 Exercitationem amet itaque hic voluptas sunt hic eaque asperiores. Rerum corporis iure placeat possimus dolorem. Aut esse tempora odio quo provident laboriosam ut aut. Quam natus vero iusto qui quia qui ad. Quas quos vitae adipisci consequatur.

9 Perferendis inventore voluptas distinctio. Aspernatur sit magnam mollitia doloribus eum. Temporibus aut sunt nihil perferendis quisquam quidem tempora. Magni quia nihil sequi.

10 Est rerum et illum. Repellendus cumque aut voluptate qui omnis rem. Ut optio amet eius. Nemo ex et voluptatem adipisci dolorem molestiae. Maxime sint sint dolorem ut reiciendis sed dolor modi. Ipsa perferendis recusandae laboriosam."
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignBottom

            states: [
                State {
                    name: "HIDDEN"
                    PropertyChanges { target: resultsPageEditor; implicitHeight: 0; }
                },
                State {
                    name: "VISIBLE"
                    PropertyChanges { target: resultsPageEditor; implicitHeight: 250; }
                }
            ]
            state: "HIDDEN"

            transitions: [
                Transition {
                    from: "*"; to: "VISIBLE"
                    NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
                },
                Transition {
                    from: "*"; to: "HIDDEN"
                    NumberAnimation { properties: "implicitHeight"; easing.type: Easing.InBack; duration: 500 }
                }
            ]
        }

ScrollView {
    property string myText

    clip: true
    ScrollBar.vertical.policy: ScrollBar.AlwaysOn

    onImplicitHeightChanged: textArea.update()

    TextArea {
        id: textArea
        text: myText
        selectByMouse: true
        wrapMode: "WrapAtWordBoundaryOrAnywhere"
        renderType: Text.NativeRendering

        background: Rectangle {
            anchors.fill: parent
            border.width: 1
            border.color: "black"
            color: "red"
        }
    }
}

在MacOS中，我发现调整TextArea的大小时ScrollView的内容无法正确显示。这就是为什么我将行onImplicitHeightChanged: textArea.update()放在行中。但是，如果没有在我的Linux上，它也可以正常工作。