QML 動的ビューの順序付けチュートリアル 1 - シンプルなリストビューと代行 QML 動的ビューの順序付けチュートリアル 3 - ドラッグした項目の移動

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
                        }
                    }
                }

サンプルプロジェクト @ code.qt.io

QML Dynamic View Ordering Tutorial 1 - シンプルな ListView と Delegate QML Dynamic View Ordering Tutorial 3 - ドラッグされたアイテムの移動

©2024 The Qt Company Ltd. ここに含まれるドキュメントの著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。