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 - ビュー項目のドラッグ

© 2025 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.