Qt6 QML Book/模型视图/基本模型

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
        }
    }
}

示例源码下载​​​​​​​