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 }