QML 動的ビュー順序設定チュートリアル 1 - シンプルな ListView とデリゲート

アプリケーションの作成は、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 動的ビューの順序付けチュートリアルビュー項目のドラッグ

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