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 name, age, type, and 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
    }

Example project @ code.qt.io