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 ? parent.left : undefined
                right: parent ? parent.right : undefined
            }

            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.

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

        anchors {
            left: parent ? parent.left : undefined
            right: parent ? parent.right : undefined
        }

        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
}

Example project @ code.qt.io