Tutoriel sur le classement dynamique des vues en QML Déplacer des éléments de vue

Tutoriel sur le tri dynamique des vues en QML 1 - Une ListView simple et un délégué

Nous commençons notre application en définissant une ` ListView`, un modèle qui fournira des données à la vue, et un délégué qui fournit un modèle pour la création d'éléments dans la vue.

Le code de la ` ListView ` et du délégué se présente comme suit :

import QtQuick

Rectangle {
    id: root

    width: 300
    height: 400

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

                Text { text: qsTr('Name: ') + content.name }
                Text { text: qsTr('Type: ') + content.type }
                Text { text: qsTr('Age: ') + content.age }
                Text { text: qsTr('Size: ') + content.size }
            }
        }
    }
    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }
}

Le modèle est défini dans un fichier QML distinct qui se présente ainsi :

import QtQuick

ListModel {
    ListElement {
        name: qsTr("Polly")
        type: qsTr("Parrot")
        age: 12
        size: qsTr("Small")
    }
    ListElement {
        name: qsTr("Penny")
        type: qsTr("Turtle")
        age: 4
        size: qsTr("Small")
    }
}

Démonstration

Le premier élément défini au sein du Rectangle racine de l’application est le composant délégué. Il s’agit du modèle à partir duquel chaque élément de l’ ListView est construit.

Les variables ` name`, ` age`, ` type` et ` size ` référencées dans le délégué proviennent des données du modèle. Leurs noms correspondent aux rôles définis dans le modèle.

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

                Text { text: qsTr('Name: ') + content.name }
                Text { text: qsTr('Type: ') + content.type }
                Text { text: qsTr('Age: ') + content.age }
                Text { text: qsTr('Size: ') + content.size }
            }
        }
    }

La deuxième partie de l'application est l'ListView elle-même, à laquelle nous lions le modèle et le délégué.

    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }

Exemple de projet sur code.qt.io

Tutoriel sur le tri dynamique des vues QML Déplacement des éléments de vue par glisser-déposer

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.