QML 动态视图排序教程 1——一个简单的 ListView 和委托
我们首先定义一个 `ListView`、一个为视图提供数据的模型，以及一个用于构建视图中项的模板的委托。
ListView 和委托的代码如下：
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
}
}模型在单独的 QML 文件中定义，内容如下：
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")
}
}操作指南
在应用程序根 Rectangle 中定义的第一个项目是委托组件。这是用于构建ListView 中每个项的模板。
委托中引用的name 、age 、type 和size 变量均来自模型数据。这些名称对应于模型中定义的角色。
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 本身，我们将模型和委托绑定到该对象上。
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.
