Qt官方示例-Qml之ListView
❝我们通过定义一个ListView，将向视图(ListView)提供数据模型(model)以及模板委托(delegate)。❞
ListView和委托(delegate)的代码如下所示：
import QtQuick 2.0
Rectangle {
id: root
width: 300; height: 400
Component {
id: dragDelegate
Rectangle {
id: content
anchors { left: parent.left; right: parent.right }
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
}
}
该数据模型在一个单独的QML文件中定义，如下所示：
import QtQuick 2.0
ListModel {
ListElement {
name: "Polly"
type: "Parrot"
age: 12
size: "Small"
}
ListElement {
name: "Penny"
type: "Turtle"
age: 4
size: "Small"
}
}
在应用程序的根Rectangle中定义的第一项是委托组件。这是用于构造ListView中每个项目的模板。
委托中引用的名称，年龄，类型和大小变量均来自模型数据。这些名称与模型中定义的角色相对应。
Component {
id: dragDelegate
Rectangle {
id: content
anchors { left: parent.left; right: parent.right }
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本身，我们将数据模型绑定并委托给它。
ListView {
id: view
anchors { fill: parent; margins: 2 }
model: PetsModel {}
delegate: dragDelegate
spacing: 4
cacheBuffer: 50
}
关于更多
- 在「QtCreator软件」可以找到：
- 或在以下「Qt安装目录」找到：
C:\Qt\{你的Qt版本}\Examples\{你的Qt版本}\quick\tutorials\dynamicview\dynamicview1- 「相关链接」
https://doc.qt.io/qt-5/qtquick-tutorials-dynamicview-dynamicview1-example.html本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-12-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
