Scrollable page with listview

Question

I have a file named page2.qml like below

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
            }
        }
    }

the result is in this image:

Since the listview contain 100 item, how can i make the whole page scrollable? i can make just listview scrollable but not the whole page.

Answer 1

If you don't need the ListView to be scrollable by itself but your whole container need to, you could use a Repeater instead and put it inside a Column wrapped in a 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
                }
            }
        }
    }
}