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

Question

如果需要，我需要将垂直滚动添加到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
                ...
            }
        }
    }
}

Answer 1

条目图层过多。ScrollView 应该是 TextEdit 的直接父级。对于列表视图，可以使用附加的 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 verynverynverynverynverynverynverynverynverynverynverynverynverynverynverynverynvery 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
                    }
                }
            }
        }
    }
}