Basic Models
基本模型
The most basic way to visualize data from a model is to use the Repeater
element. It is used to instantiate an array of items and is easy to combine with a positioner to populate a part of the user interface. A repeater uses a model, which can be anything from the number of items to instantiate, to a full-blown model gathering data from the Internet.
可视化模型数据的最基本方法是使用Repeater元素类型。它用于实例化项目数组,并且易于与定位器组合以组成用户界面的一部分。重复器Repeater使用一个模型,该模型可以是从要实例化的项目数,也可以是从Internet收集数据的完整模型。
Using a number
使用数字
In its simplest form, the repeater can be used to instantiate a specified number of items. Each item will have access to an attached property, the variable index
, that can be used to tell the items apart.
最简单的形式,重复器Repeater可用于实例化指定数量的项。每个项都可以访问一个附加属性,即变量索引index
,该属性可用于区分项目。
In the example below, a repeater is used to create 10 instances of an item. The number of items is controlled using the model
property and their visual representation is controlled using the delegate
property. For each item in the model, a delegate is instantiated (here, the delegate is a BlueBox
, which is a customized Rectangle
containing a Text
element. As you can tell, the text
property is set to the index
value, thus the items are numbered from zero to nine.
在下面的示例中,重复器Repeater创建10个项的实例。项目的数量使用model
属性进行控制,其可视化使用delegate
属性进行控制。对于模型中的每个项,都会实例化一个委托(这里,委托是BlueBox
,它是一个包含Text
元素类型的自定义Rectangle
。可以看出,文本属性text
设置为索引值index
,因此项目的编号从零到九。
import QtQuick
import "../common"
Column {
spacing: 2
Repeater {
model: 10
delegate: BlueBox {
required property int index
width: 100
height: 32
text: index
}
}
}
Using an array
使用数组
As nice as lists of numbered items are, it is sometimes interesting to display a more complex data set. By replacing the integer model
value with a JavaScript array, we can achieve that. The contents of the array can be of any type, be it strings, integers or objects. In the example below, a list of strings is used. We can still access and use the index
variable, but we also have access to modelData
containing the data for each element in the array.
尽管有编号的项目列表很好,但有时希望显示更复杂的数据集。通过使用JavaScript数组替换整数模型值,我们可以实现一个数据。数组内可以是任何类型,如字符串、整数或对象。在下面的示例中,使用了字符串列表。我们仍然可以访问和使用index变量,但是我们也可以通过modelData,访问数组中的元素数据。
import QtQuick
import "../common"
Column {
spacing: 2
Repeater {
model: ["Enterprise", "Columbia", "Challenger", "Discovery", "Endeavour", "Atlantis"]
delegate: BlueBox {
required property var modelData
required property int index
width: 100
height: 32
radius: 3
text: modelData + ' (' + index + ')'
}
}
}
Using a ListModel
使用ListModel
Being able to expose the data of an array, you soon find yourself in a position where you need multiple pieces of data per item in the array. This is where models enter the picture. One of the most trivial models and one of the most commonly used is the ListModel
. A list model is simply a collection of ListElement
items. Inside each list element, a number of properties can be bound to values. For instance, in the example below, a name and a color are provided for each element.
现在可以使用一个数组的数据,您很快就会发现自己有这样的需求:数组中的每个项都需要多个数据段。下图是加载模型数据后的截图。ListModel是最简单、最常用的模型之一。列表模型只是ListElement项的集合。在列表每个元素中,可以绑定很多属性值。例如,在下面的示例中,为每个元素提供了名称和颜色。
The properties bound inside each element are attached to each instantiated item by the repeater. This means that the variables name
and surfaceColor
are available from within the scope of each Rectangle
and Text
item created by the repeater. This not only makes it easy to access the data, it also makes it easy to read the source code. The surfaceColor
is the color of the circle to the left of the name, not something obscure as data from column i
of row j
.
每个元素的属性绑定,由repeater附加到每个实例化的项。这意味着变量name和surfaceColor可以在repeater创建的每个矩形Rectangle
和文本项Text
的范围内使用。这不仅容易访问数据,还使源码可读性更好。surfaceColor是左侧圆圈颜色的名称,而不是j行i列中难懂的颜色值。
import QtQuick
import "../common"
Column {
spacing: 2
Repeater {
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" }
}
delegate: BlueBox {
id: blueBox
required property string name
required property color surfaceColor
width: 120
height: 32
radius: 3
text: name
Box {
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 4
width: 16
height: 16
radius: 8
color: blueBox.surfaceColor
}
}
}
}
Using a delegate as default property
使用委托作为默认属性
The delegate
property of the Repeater
is its default property. This means that it's also possible to write the code of example Example 01 as follows:
Repeater
的委托属性delegate
是其默认属性。这意味着也可以编写示例01的代码,如下所示:
import QtQuick
import "../common"
Column {
spacing: 2
Repeater {
model: 10
BlueBox {
required property int index
width: 100
height: 32
text: index
}
}
}
示例源码下载