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:
Sélectionnez
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: '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:
Sélectionnez
import QtQuick
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.
Sélectionnez
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: '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.
Sélectionnez
ListView {
id: view
anchors { fill: parent; margins: 2 }
model: PetsModel {}
delegate: dragDelegate
spacing: 4
cacheBuffer: 50
}