分离数据与显示的基础模型 Repeater
代码:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
// 定位器
Column{
spacing: 10
x:20
y:20
Repeater{
// 数据项有十项
model: 10
Rectangle{
width: 100
height: 20
radius: 3
color: "red"
Text {
anchors.centerIn: parent
// 打印数据项编号
text: index
}
}
}
}
}
这里面 Rrepreater是一个制造/管理数据项的 Model(Model负责产生数据,也因此称Repeater 是最基本的Model/View),然后将数据给了定位器 Column去排列显示!
mdelData
-
我们可以使用一个序列来替换 model 的值(在前一个例子中model仅仅是一个整形) 序列可以使用任何类型的内容,可以是字符串,整数,或者对象
- 接下来使用字符串数组作为序列的内容并且演示怎么使用序列!
Repeater{
// 数据项有十项
model: ["Enterprise","Colombia","Challenger",
"Discovery","Endeavour","Atlantis"]
Rectangle{
width: 100
height: 20
radius: 3
color: "red"
Text {
anchors.centerIn: parent
// 打印数据项编号
text: index + ": " + modelData
}
}
}
将 model 视为个数组,使用的时候直接使用数组名!
ListModel
上面我们使用序列赋值给了 model,ListModel也是序列(由每一项ListElement组成的序列),其中每一项都是一个元素(Element),并且 Repeater 中对ListElement的属性可以直接引用!
代码:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "blue"
// 定位器
Column{
spacing: 10
x:20
y:20
Repeater{
// ListElement组成的序列
model: ListModel{
ListElement { name: "Mercury"; surfaceColor: "gray" }
ListElement { name: "Venus"; surfaceColor: "yellow" }
ListElement { name: "Earth"; surfaceColor: "blue" }
ListElement { name: "Mars"; surfaceColor: "orange" }
ListElement { name: "Jupiter"; surfaceColor: "orange" }
ListElement { name: "Saturn"; surfaceColor: "yellow" }
ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
ListElement { name: "Neptune"; surfaceColor: "lightBlue"}
}
Rectangle{
width: 200
height: 40
radius: 3
color: "gray"
Text {
anchors.centerIn: parent
// 可以直接引用序列的属性
text: name
}
// 显示在矩形左边的圆形
Rectangle{
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 2
width: 20
height: 20
radius: 10
border.color: "black"
border.width: 2
// 直接引用序列的属性
color: surfaceColor
}
}
}
}
}
关键部分注释了!
运行>>
beautiful~