Défilement d'un ListView dans une colonne en QML

En . place ses enfants sur une surface que l'on peut faire glisser et sur laquelle on peut cliquer, ce qui fait défiler la vue sur les éléments enfants. Ce comportement constitue la base des éléments qui sont conçus pour afficher un grand nombre d'éléments enfants, tels que ListView et GridView.

Dans les interfaces utilisateur traditionnelles, il est possible de faire défiler les vues à l'aide de contrôles standard, tels que les barres de défilement et les boutons fléchés. Dans certaines situations, il est également possible de faire glisser la vue directement en appuyant sur le bouton de la souris et en le maintenant enfoncé tout en déplaçant le curseur. Dans les interfaces utilisateur tactiles, cette action de glissement est souvent complétée par une action d'effleurement, où le défilement se poursuit après que l'utilisateur a cessé de toucher la vue.

Flickable ne clipse pas automatiquement son contenu. S'il n'est pas utilisé en tant qu'élément plein écran, vous devriez envisager de définir l'option clip à la propriété true .

L'exemple de code ressemble donc maintenant à ceci :

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