Tutoriel 2 sur le tri dynamique des vues QML - Glisser-déposer des éléments de vue
Maintenant que nous disposons d’une liste visible d’éléments, nous souhaitons 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 se présente comme suit :
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 }
}
}
}
}Démarche détaillée
Le principal changement réside dans le fait que l’élément racine du délégué est désormais un ` MouseArea `, qui fournit des gestionnaires d’événements de souris et nous permettra 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 glissement de l’élément de contenu est activé en le liant à la propriété ` drag.target ` de l’ MouseArea. Comme nous souhaitons toujours que la vue puisse être parcourue d’un geste rapide, nous attendons que le signal ` pressAndHold ` de l’ MouseArea soit émis avant de lier la cible de glissement. Ainsi, lorsque la souris se déplace avant l’expiration du délai d’attente, cela est interprété comme un déplacement de la liste, et si elle se déplace après, cela est interprété comme le glissement d’un élément. Pour indiquer plus clairement à l’utilisateur quand un élément peut être glissé, nous allons modifier la couleur d’arrière-plan de l’élément de contenu une fois le délai d’attente écoulé.
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }L’autre chose que nous devons faire avant qu’un élément puisse être glissé est de désactiver tous les ancrages de l’élément de contenu afin qu’il puisse être déplacé librement. Nous effectuons cette opération lors d’un changement d’état déclenché lorsque l’élément délégué est maintenu enfoncé ; parallèlement, nous pouvons réaffecter l’élément de contenu à l’élément racine afin qu’il se trouve au-dessus des autres éléments dans l’ordre d’empilement et qu’il ne soit pas masqué lorsqu’il est déplacé.
states: State {
when: dragArea.held
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}© 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.
