QML 動的ビューの順序付けチュートリアル QML 動的ビューの順序付けチュートリアル2 - ビューアイテムのドラッグ

QML 動的ビューオーダーのチュートリアル 1 - シンプルなリストビューとデリゲート

ビューにデータを提供するモデルであるListView と、ビューのアイテムを作成するためのテンプレートを提供するデリゲートを定義することからアプリケーションを始めます。

ListView とデリゲートのコードは以下のようになります：

import QtQuick

Rectangle {
    id: root

    width: 300
    height: 400

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

                Text { text: qsTr('Name: ') + content.name }
                Text { text: qsTr('Type: ') + content.type }
                Text { text: qsTr('Age: ') + content.age }
                Text { text: qsTr('Size: ') + content.size }
            }
        }
    }
    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }
}

モデルは別のQMLファイルで定義します：

import QtQuick

ListModel {
    ListElement {
        name: qsTr("Polly")
        type: qsTr("Parrot")
        age: 12
        size: qsTr("Small")
    }
    ListElement {
        name: qsTr("Penny")
        type: qsTr("Turtle")
        age: 4
        size: qsTr("Small")
    }
}

チュートリアル

アプリケーションのルートRectangle内に定義された最初のアイテムは、デリゲートComponentです。これは、ListView の各アイテムを構成するテンプレートです。

デリゲートで参照されるname 、age 、type 、size 変数は、モデルデータから取得されます。名前はモデルで定義されたロールに対応しています。

    Component {
        id: dragDelegate

        Rectangle {
            id: content

            required property string name
            required property string type
            required property string size
            required property int age

            width: view.width
            height: column.implicitHeight + 4

            border.width: 1
            border.color: "lightsteelblue"

            radius: 2

            Column {
                id: column
                anchors {
                    fill: parent
                    margins: 2
                }

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

アプリケーションの2番目の部分は、モデルとデリゲートをバインドするListView 。

    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }

プロジェクト例 @ code.qt.io

QML 動的ビュー順序付けチュートリアル QML 動的ビュー順序付けチュートリアル 2 - ビュー項目のドラッグ

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