带有列表视图的可滚动页面

Question

我有一个名为 page2.qml 的文件，如下所示

Page {
        id: page

        Rectangle {
            id: container
            anchors.fill: parent
            width: parent.width * 0.8

            Rectangle {
                id: title
                anchors.top: parent.top
                width: parent.width
                height: 50
                color: "salmon"
            }

            ListView {
                id: listView
                currentIndex: -1
                anchors.top: title.bottom
                anchors.bottom: parent.bottom


                delegate: Rectangle {
                    height: 20
                    width: 100
                    border.color: "red"
                    color: "pink"
                    Text {
                        text: model.index
                    }
                }

                model: 100
            }
        }
    }

结果如下图所示：

由于列表视图包含 100 个项目，我怎样才能使整个页面可滚动？我可以只使列表视图可滚动，但不能使整个页面滚动。

Answer 1

如果您不需要 ListView 本身可滚动但您的整个容器需要，您可以使用 Repeater 并将其放在 Column 包裹内在 Flickable :

Flickable {
    id: container
    contentHeight: column.implicitHeight
    contentWidth: width
    width: parent.width * 0.8
    height: parent.height

    Column {
        id: column
        width: parent.width

        Rectangle {
            id: title
            width: parent.width
            height: 50
            color: "salmon"
        }

        Repeater {
            id: listView
            model: 100

            delegate: Rectangle {
                height: 20
                width: 100
                border.color: "red"
                color: "pink"
                Text {
                    text: model.index
                }
            }
        }
    }
}

带有列表视图的可滚动页面

Scrollable page with listview

qt

qml

qt5

qtquickcontrols2