web-dev-qa-db-fra.com

Défilement de ListView dans une colonne en QML

Le code ci-dessous fonctionne correctement (merci à Sylvain), mais uniquement lors du défilement, la ligne supérieure de ListView remplace le bouton Ligne. Une idée ? -

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
            }
        }
    }
}
}
application-developmentubuntu-sdkqml
1
user262898

L'élément Flickable place ses enfants sur une surface qui peut être déplacée et déplacée, ce qui entraîne le défilement de la vue sur les éléments enfants. Ce comportement constitue la base des éléments 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 commandes standard, telles 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 maintenant enfoncé un bouton de la souris tout en déplaçant le curseur. Dans les interfaces utilisateur tactiles, cette action de glissement est souvent complétée par une action de défilement, le défilement se poursuivant une fois que l'utilisateur a cessé de toucher la vue.

Flickable ne coupe pas automatiquement son contenu. S'il n'est pas utilisé en tant qu'élément plein écran, vous devez définir la propriété du clip sur true.

Ainsi, l'exemple de code ressemble 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
                }
            }
        }
    }
}
1
Sylvain Pineau