QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate | Qt Quick (original) (raw)

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](qml-qtquick-rectangle.html) {
        id: content

        required property [string](qml-string.html) name
        required property [string](qml-string.html) type
        required property [string](qml-string.html) size
        required property [int](qml-int.html) age

        width: view.width
        height: column.implicitHeight + 4

        border.width: 1
        border.color: "lightsteelblue"

        radius: 2

        [Column](qml-qtquick-column.html) {
            id: column
            anchors {
                fill: parent
                margins: 2
            }

            [Text](qml-qtquick-text.html) { text: qsTr('Name: ') + content.name }
            [Text](qml-qtquick-text.html) { text: qsTr('Type: ') + content.type }
            [Text](qml-qtquick-text.html) { text: qsTr('Age: ') + content.age }
            [Text](qml-qtquick-text.html) { text: qsTr('Size: ') + content.size }
        }
    }
}
[ListView](qml-qtquick-listview.html) {
    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](qml-qtquick-rectangle.html) {
        id: content

        required property [string](qml-string.html) name
        required property [string](qml-string.html) type
        required property [string](qml-string.html) size
        required property [int](qml-int.html) age

        width: view.width
        height: column.implicitHeight + 4

        border.width: 1
        border.color: "lightsteelblue"

        radius: 2

        [Column](qml-qtquick-column.html) {
            id: column
            anchors {
                fill: parent
                margins: 2
            }

            [Text](qml-qtquick-text.html) { text: qsTr('Name: ') + content.name }
            [Text](qml-qtquick-text.html) { text: qsTr('Type: ') + content.type }
            [Text](qml-qtquick-text.html) { text: qsTr('Age: ') + content.age }
            [Text](qml-qtquick-text.html) { text: qsTr('Size: ') + content.size }
        }
    }
}

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

[ListView](qml-qtquick-listview.html) {
    id: view

    anchors {
        fill: parent
        margins: 2
    }

    model: PetsModel {}
    delegate: dragDelegate

    spacing: 4
    cacheBuffer: 50
}

Example project @ code.qt.io

QML Dynamic View Ordering Tutorial Dragging View Items

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