QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate | Qt Quick | Qt 6.11.1

- Qt 6.11
- Qt Quick
- Qt Quick Examples and Tutorials
- QML Dynamic View Ordering Tutorial
- QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
- Qt 6.11.1 Reference Documentation

QML Dynamic View Ordering Tutorial ◦ Dragging View Items

# 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

QML Dynamic View Ordering Tutorial ◦ Dragging View Items