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
     }