Une simple ListView et un délégué déplaçant les éléments glissés

QML Dynamic View Ordering Tutorial 2 - Déplacer des éléments de la vue

Maintenant que nous disposons d'une liste visible d'éléments, nous voulons pouvoir interagir avec eux. Nous allons commencer par étendre le délégué afin que le contenu visible puisse être déplacé vers le haut et vers le bas de l'écran. Le délégué mis à jour ressemble à ceci :

    Component {
        id: dragDelegate

        MouseArea {
            id: dragArea

            property bool held: false
            required property string name
            required property string type
            required property string size
            required property int age

            anchors {
                left: parent?.left
                right: parent?.right
            }
            height: content.height

            drag.target: held ? content : undefined
            drag.axis: Drag.YAxis

            onPressAndHold: held = true
            onReleased: held = false

            Rectangle {
                id: content
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    verticalCenter: parent.verticalCenter
                }
                width: dragArea.width
                height: column.implicitHeight + 4

                border.width: 1
                border.color: "lightsteelblue"
                color: dragArea.held ? "lightsteelblue" : "white"
                Behavior on color { ColorAnimation { duration: 100 } }
                radius: 2
                states: State {
                    when: dragArea.held

                    ParentChange {
                        target: content
                        parent: root
                    }
                    AnchorChanges {
                        target: content
                        anchors {
                            horizontalCenter: undefined
                            verticalCenter: undefined
                        }
                    }
                }
                Column {
                    id: column
                    anchors {
                        fill: parent
                        margins: 2
                    }

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

Visite guidée

Le principal changement est que l'élément racine du délégué est maintenant un MouseArea qui fournit des gestionnaires pour les événements de souris et nous permet de faire glisser l'élément de contenu du délégué. Il sert également de conteneur pour l'élément de contenu, ce qui est important car l'élément racine d'un délégué est positionné par la vue et ne peut pas être déplacé par d'autres moyens.

        MouseArea {
            id: dragArea

            property bool held: false
            required property string name
            required property string type
            required property string size
            required property int age

            anchors {
                left: parent?.left
                right: parent?.right
            }
            height: content.height

            drag.target: held ? content : undefined
            drag.axis: Drag.YAxis

            onPressAndHold: held = true
            onReleased: held = false

            Rectangle {
                id: content
            }
        }

Le déplacement de l'élément de contenu est possible en le liant à la propriété drag.target de MouseArea. Comme nous voulons que la vue soit toujours mobile, nous attendons que le signal pressAndHold de MouseArea soit émis avant de lier la cible du glissement. Ainsi, lorsque la souris se déplace avant l'expiration du délai de maintien, elle est interprétée comme un déplacement de la liste et si elle se déplace après, elle est interprétée comme un déplacement d'un élément. Pour que l'utilisateur sache mieux quand un élément peut être déplacé, nous changerons la couleur d'arrière-plan de l'élément de contenu lorsque le délai d'attente aura expiré.

                color: dragArea.held ? "lightsteelblue" : "white"
                Behavior on color { ColorAnimation { duration: 100 } }

L'autre chose que nous devrons faire avant qu'un élément puisse être déplacé est de désactiver les ancres sur l'élément de contenu afin qu'il puisse être déplacé librement. Nous faisons cela dans un changement d'état qui est déclenché lorsque l'élément délégué est tenu, en même temps que nous pouvons reparenter l'élément de contenu à l'élément racine afin qu'il soit au-dessus des autres éléments dans l'ordre d'empilement et qu'il ne soit pas obscurci lorsqu'il est déplacé.

                states: State {
                    when: dragArea.held

                    ParentChange {
                        target: content
                        parent: root
                    }
                    AnchorChanges {
                        target: content
                        anchors {
                            horizontalCenter: undefined
                            verticalCenter: undefined
                        }
                    }
                }

Exemple de projet @ code.qt.io

Une simple ListView et un délégué qui déplace les éléments glissés

© 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.