QML-Tutorial zur dynamischen Anordnung von Ansichten, Teil 2 – Verschieben von Ansichtsobjekten
Da wir nun eine sichtbare Liste von Elementen haben, möchten wir mit diesen interagieren können. Wir beginnen damit, den Delegaten so zu erweitern, dass der sichtbare Inhalt auf dem Bildschirm nach oben und unten gezogen werden kann. Der aktualisierte Delegat sieht wie folgt aus:
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 }
}
}
}
}Schritt-für-Schritt-Anleitung
Die wesentliche Änderung besteht darin, dass das Stammelement des Delegaten nun ein „ MouseArea “ ist, das Handler für Mausereignisse bereitstellt und es uns ermöglicht, das Inhaltselement des Delegaten zu verschieben. Es fungiert zudem als Container für das Inhaltselement, was wichtig ist, da das Stammelement eines Delegaten von der Ansicht positioniert wird und nicht auf andere Weise verschoben werden kann.
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
}
}Das Ziehen des Inhaltselements wird aktiviert, indem es an die Eigenschaft „ drag.target “ des „ MouseArea “ gebunden wird. Da wir weiterhin möchten, dass die Ansicht durch Wischen gesteuert werden kann, warten wir, bis das Signal „ pressAndHold “ des „ MouseArea “ ausgelöst wird, bevor wir das Ziehziel binden. Auf diese Weise wird eine Mausbewegung vor Ablauf der Haltezeit als Verschieben der Liste interpretiert, während eine Bewegung danach als Ziehen eines Elements interpretiert wird. Um dem Benutzer deutlicher zu machen, wann ein Element gezogen werden kann, ändern wir die Hintergrundfarbe des Inhaltselements, sobald das Timeout abgelaufen ist.
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }Außerdem müssen wir, bevor ein Element gezogen werden kann, alle Verankerungen des Inhaltselements aufheben, damit es frei verschoben werden kann. Dies erfolgt im Rahmen eines Zustandswechsels, der ausgelöst wird, wenn das Delegate-Element gedrückt gehalten wird. Gleichzeitig können wir das Inhaltselement dem Root-Element unterordnen, sodass es in der Stapelreihenfolge über den anderen Elementen liegt und beim Ziehen nicht verdeckt wird.
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.
