QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate

We begin our application by defining a ListView , a model which will provide data to the view, and a delegate which provides a template for constructing items in the view.

The code for the ListView and delegate looks like this:

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

The model is defined in a separate QML file which looks like this:

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

Walkthrough

The first item defined within the application's root Rectangle is the delegate Component. This is the template from which each item in the ListView is constructed.

The 名称 , age , type ，和 size variables referenced in the delegate are sourced from the model data. The names correspond to roles defined in the model.

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

The second part of the application is the ListView itself to which we bind the model and delegate.

    ListView {
        id: view
        anchors {
            fill: parent
            margins: 2
        }
        model: PetsModel {}
        delegate: dragDelegate
        spacing: 4
        cacheBuffer: 50
    }

范例工程 @ code.qt.io

QML Dynamic View Ordering Tutorial QML Dynamic View Ordering Tutorial 2 - Dragging View Items

内容

Walkthrough