Scrolling of ListView within a Column in QML

Question

Below code is working fine ( thanks to Sylvain ), only when scroling, the top row from the ListView overwrite the buttonRow. Any idea ? –

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
width: units.gu(60)
height: units.gu(60)

ListModel {
    id: fruitModel
    ListElement {
        name: "Apple"
        cost: 2.45
    }
    ListElement {
        name: "Orange"
        cost: 3.25
    }
    ListElement {
        name: "Banana"
        cost: 1.95
    }
}

Page {
    id: test

    Column {
        spacing: units.gu(1)
        id: pageLayout
        anchors {
            margins: units.gu(2)
            fill: parent
        }

        Row {
            id: buttonRow
            spacing: units.gu(1)
            Button {
                objectName: "button1"
                color: "white"
                text: i18n.tr("Help")
            }
            Button {
                objectName: "button2"
                color: "black"
                text: i18n.tr("Search")
            }
        }

        Item {
            anchors.top: buttonRow.bottom
            ListView {
                id: list
                width: units.gu(18)
                height: units.gu(3)
                model: fruitModel
                boundsBehavior: Flickable.StopAtBounds
                delegate: Row {
                    Text { text: "Fruit: " + name }
                    Text { text: "Cost: $" + cost }
                }
            }
            Scrollbar {
                flickableItem: list
                align: Qt.AlignTrailing
            }
        }
    }
}
}

Solution

The Flickable item places its children on a surface that can be dragged and flicked, causing the view onto the child items to scroll. This behavior forms the basis of Items that are designed to show large numbers of child items, such as ListView and GridView.

In traditional user interfaces, views can be scrolled using standard controls, such as scroll bars and arrow buttons. In some situations, it is also possible to drag the view directly by pressing and holding a mouse button while moving the cursor. In touch-based user interfaces, this dragging action is often complemented with a flicking action, where scrolling continues after the user has stopped touching the view.

Flickable does not automatically clip its contents. If it is not used as a full-screen item, you should consider setting the clip property to true.

So the sample code now looks like this:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: units.gu(60)
    height: units.gu(60)

    ListModel {
        id: fruitModel
        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    Page {
        id: test

        Column {
            spacing: units.gu(1)
            id: pageLayout
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            Row {
                id: buttonRow
                spacing: units.gu(1)
                Button {
                    objectName: "button1"
                    color: "white"
                    text: i18n.tr("Help")
                }
                Button {
                    objectName: "button2"
                    color: "black"
                    text: i18n.tr("Search")
                }
            }

            Item {
                anchors.top: buttonRow.bottom
                ListView {
                    id: list
                    clip: true
                    width: units.gu(18)
                    height: units.gu(3)
                    model: fruitModel
                    boundsBehavior: Flickable.StopAtBounds
                    delegate: Row {
                        Text { text: "Fruit: " + name }
                        Text { text: "Cost: $" + cost }
                    }
                }
                Scrollbar {
                    flickableItem: list
                    align: Qt.AlignTrailing
                }
            }
        }
    }
}

Comments

[user262898]

Maybe in our demo example it helps , but in real live , when the row in the ListView is high it will not help, as the small margin should be big , which does not look OK.

[Sylvain Pineau]

I've update my answer with a better solution using the clip property.