- Qt 5.15
- Qt Quick
- QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
- Qt 5.15.19 Reference Documentation

QML Dynamic View Ordering Tutorial ◦ QML Dynamic View Ordering Tutorial 2 - 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 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