Tutorial zur dynamischen Anordnung von Ansichten in QML, Teil 1 – Eine einfache ListView und ein Delegate
Wir beginnen unsere Anwendung mit der Definition einer ` ListView`, eines Modells, das Daten für die Ansicht bereitstellt, sowie eines Delegaten, der eine Vorlage für die Erstellung von Elementen in der Ansicht bereitstellt.
Der Code für die „ ListView “ und den Delegaten sieht wie folgt aus:
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
}
}Das Modell ist in einer separaten QML-Datei definiert, die wie folgt aussieht:
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")
}
}Schritt-für-Schritt-Anleitung
Das erste Element, das innerhalb des Stamm-Rectangle der Anwendung definiert wird, ist die Delegate-Komponente. Dies ist die Vorlage, anhand derer jedes Element im „ ListView “ erstellt wird.
Die im Delegaten referenzierten Variablen „ name “, „ age “, „ type “ und „ size “ stammen aus den Modelldaten. Die Namen entsprechen den im Modell definierten Rollen.
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 }
}
}
}Der zweite Teil der Anwendung ist das „ ListView “ selbst, an das wir das Modell und den Delegaten binden.
ListView {
id: view
anchors {
fill: parent
margins: 2
}
model: PetsModel {}
delegate: dragDelegate
spacing: 4
cacheBuffer: 50
}© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
