向 QML 小部件添加滚动条 (Qt 5.9.3)答案

【问题标题】：Adding scrollbars to QML widgets (Qt 5.9.3)向 QML 小部件添加滚动条 (Qt 5.9.3)
【发布时间】：2018-06-19 17:05:30
【问题描述】：

如果需要，我需要添加垂直滚动到TextEdit 和水平滚动到ListView，并显示滚动条。两个小部件都必须填充其父布局提供的整个空间。我怎样才能做到这一点？例子对我没有帮助。

ScrollableTextEdit:

ColumnLayout {
    ...
    ScrollView {
        id: scroll_view
        Layout.fillWidth: true
        Layout.fillHeight: true
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ???
        Rectangle {
            border.color: 'gray'
            ???
            TextEdit {
                id: text_edit
                anchors.fill: parent
                textFormat: TextEdit.RichText
                wrapMode: TextEdit.Wrap
            }
        }
    }
}

ScrollableListView:

ColumnLayout {
    ...
    ScrollView {
        id: scroll_view
        Layout.fillWidth: true
        Layout.fillHeight: true
        ScrollBar.vertical.policy: ScrollBar.AlwaysOff
        ???
        Rectangle {
            border.color: 'gray'
            ???
            ListView {
                id: list_view
                anchors.fill: parent
                ...
            }
        }
    }
}

【问题讨论】：

标签： qt scroll qml scrollbar

【解决方案1】：

你有太多的物品层。 ScrollView 应该是 TextEdit 的直接父级。对于 ListView，您可以使用附加的 ScrollBar.horizontal 属性来创建滚动条，而无需使用 ScrollView。

见下例

ApplicationWindow {
    visible: true
    x: 0
    y: 0
    width: 600
    height: 200
    id: root

    RowLayout
    {
        anchors.fill: parent
        anchors.margins: 20

        ColumnLayout
        {
            Label
            {
                text: "Example 1 (Vertical TextEdit)"
            }

            ScrollView
            {
                id: textEdit
                Layout.fillHeight: true
                Layout.fillWidth: true
                clip: true
                TextEdit
                {
                    text: "A very\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery\nvery long text"
                    anchors.fill: parent
                }
            }
        }


        ColumnLayout
        {
            Label
            {
                text: "Example 2 (Horizontal ListView)"
            }

            ListView
            {
                id: listView
                Layout.fillHeight: true
                Layout.fillWidth: true
                model: 10
                spacing: 10

                orientation: ListView.Horizontal
                ScrollBar.horizontal: ScrollBar {}

                delegate: Rectangle {
                    border.width: 1
                    height: parent.height
                    width: 100
                    Text {
                        anchors.centerIn: parent
                        text: index
                    }
                }
            }
        }

    }

}

【讨论】：