带有listview的可滚动页面

时间:2017-07-24 10:35:46

标签: qt qml qt5 qtquickcontrols2

我有一个名为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
            }
        }
    }

结果如下图所示: result

由于listview包含100个项目,如何使整个页面可滚动?我可以让listview可滚动但不是整页。

1 个答案:

答案 0 :(得分:2)

如果您不需要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 } } } } }

gem build