QML Dynamic View Ordering Tutorial QML Dynamic View Ordering Tutorial 2 - Ziehen von Ansichtselementen

QML Dynamic View Ordering Tutorial 1 - Eine einfache ListView und ein Delegat

Wir beginnen unsere Anwendung mit der Definition einer ListView, einem Modell, das der Ansicht Daten zur Verfügung stellt, und einem Delegaten, der eine Vorlage für die Erstellung von Elementen in der Ansicht bereitstellt.

Der Code für die ListView und den Delegaten sieht wie folgt aus:

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

Das Modell wird in einer separaten QML-Datei definiert, die wie folgt aussieht:

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

Exkursion

Das erste Element, das innerhalb des Wurzel-Rechtecks der Anwendung definiert wird, ist der Delegat Component. Dies ist die Vorlage, aus der jedes Element in ListView aufgebaut ist.

Die Variablen name, age, type und size, auf die im Delegaten verwiesen wird, stammen aus den Modelldaten. Die Namen entsprechen den im Modell definierten Rollen.

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

Der zweite Teil der Anwendung ist die ListView selbst, an die wir das Modell und den Delegaten binden.

    ListView {
        id: view

        anchors {
            fill: parent
            margins: 2
        }

        model: PetsModel {}
        delegate: dragDelegate

        spacing: 4
        cacheBuffer: 50
    }

Beispielprojekt @ code.qt.io

QML Dynamic View Ordering Tutorial QML Dynamic View Ordering Tutorial 2 - Ziehen von Ansichtselementen

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