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 2.0
Rectangle {
    id: root
    width: 300; height: 400
    Component {
        id: dragDelegate
        Rectangle {
            id: content
            anchors { left: parent.left; right: parent.right }
            height: column.implicitHeight + 4
            border.width: 1
            border.color: "lightsteelblue"
            radius: 2
            Column {
                id: column
                anchors { fill: parent; margins: 2 }
                Text { text: 'Name: ' + name }
                Text { text: 'Type: ' + type }
                Text { text: 'Age: ' + age }
                Text { text: 'Size: ' + 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 2.0
ListModel {
    ListElement {
        name: "Polly"
        type: "Parrot"
        age: 12
        size: "Small"
    }
    ListElement {
        name: "Penny"
        type: "Turtle"
        age: 4
        size: "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.

name , 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
            anchors { left: parent.left; right: parent.right }
            height: column.implicitHeight + 4
            border.width: 1
            border.color: "lightsteelblue"
            radius: 2
            Column {
                id: column
                anchors { fill: parent; margins: 2 }
                Text { text: 'Name: ' + name }
                Text { text: 'Type: ' + type }
                Text { text: 'Age: ' + age }
                Text { text: 'Size: ' + 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
    }

文件：