QML 動的ビュー順序設定チュートリアル 2 - ビュー項目のドラッグ
アイテムのリストが表示されたので、次はそれらとインタラクションできるようにします。まず、表示されているコンテンツを画面上で上下にドラッグできるように、デリゲートを拡張することから始めます。更新後のデリゲートは次のようになります：
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 }
}
}
}
}手順
ここでの主な変更点は、デリゲートのルートアイテムがMouseArea になったことです。これはマウスイベント用のハンドラを提供し、デリゲートのコンテンツアイテムをドラッグできるようにします。また、コンテンツアイテムのコンテナとしても機能します。これは、デリゲートのルートアイテムはビューによって位置決めされ、他の手段では移動できないため、重要な点です。
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
}
}コンテンツ項目のドラッグを有効にするには、それをMouseArea のdrag.target プロパティにバインドします。ビューのフリック操作は引き続き可能にしたいので、MouseArea のpressAndHold シグナルが発信されるまで待機してから、ドラッグターゲットをバインドします。こうすることで、ホールドタイムアウトが切れる前にマウスが動いた場合はリストの移動と解釈され、タイムアウト後に動いた場合は項目のドラッグと解釈されます。 アイテムがドラッグ可能になったことをユーザーにより明確に伝えるため、タイムアウトが切れた際にコンテンツアイテムの背景色を変更します。
color: dragArea.held ? "lightsteelblue" : "white"
Behavior on color { ColorAnimation { duration: 100 } }また、アイテムをドラッグ可能にする前に、コンテンツアイテム上のアンカーをすべて解除し、自由に移動できるようにする必要があります。 これは、デリゲートアイテムがホールドされたときにトリガーされる状態変更内で実行します。同時に、コンテンツアイテムをルートアイテムの子として再設定することで、スタック順で他のアイテムより上になり、ドラッグ中に隠れてしまうのを防ぎます。
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.
