qml之Repeater

简介

Repeater用于创建大量类似项。与其他视图类型一样，Repeater有一个模型和一个委托：对于模型中的每一项，委托都在一个上下文中实例化。Repeater通常用于在定位器类型（如Row或Column）中，以直观地定位由Repeater创建的多个委托项。

注意：Repeater拥有它实例化的所有项。删除或动态销毁由Repeater创建的项会导致不可预知的行为。

使用Repeater时的注意事项：
Repeater在第一次创建时会创建其所有委托项。如果存在大量的委托项，并且不是所有的项都需要同时可见，那么这么做效率可能会很低。如果是这种情况，请考虑使用其他视图类型，如ListView（它仅在将委托项滚动到视图中时创建委托项），或者根据需要使用动态对象创建方法来创建委托项。

另外，请注意，Repeater是基于项的，并且只能重复项派生的对象。

model 属性可以取下列值:
数字
字符串列表
对象列表
ListModel 等常见的 model

model 为数字
model 为数字时指示 Repeater 创建特定数量的组件，此时在 delegate 组件内可以访问 index 属性。

简单示例 repeater_number.qml：

import QtQuick 2.2
import QtQuick.Layouts 1.1
Rectangle {
    width: 400
    height: 200
    color: "#EEEEEE"
    RowLayout {
        anchors.fill: parent
        spacing: 4
        Repeater {
            model: 8
            Rectangle {
                width: 46
                height: 30
                color: "steelblue"
                Text {
                    anchors.fill: parent
                    color: "black"
                    font.pointSize: 14
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: index
                }
            }
        }
    }
}

model 取值 8，delegate 是内嵌一个 Text 对象的 Rectangle 对象，Text 对象显示索引。我使用 RowLayout 作为 Repeater 的 parent。

model为字符串列表
当使用字符串列表作为 model 时，Repeater 创建的 Item 数量由列表长度决定，在 delegate 内可以通过 modelData 访问字符串对象。

import QtQuick 2.2
import QtQuick.Layouts 1.1
Rectangle {
    width: 300
    height: 200
    color: "#EEEEEE"
    Row {
        anchors.centerIn: parent
        spacing: 8
        Repeater {
            model: ["Hello", "Qt", "Quick"]
            Text {
                color: "blue"
                font.pointSize: 18
                font.bold: true
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: modelData
            }
        }
    }
}

这里使用 Row 作为 Repeater 的 parent。delegate 非常简单，就是个 Text 对象。使用 qmlscene 加载 repeater_stringlist.qml

model为对象列表
使用对象列表作为 model 与使用字符串列表类似，只是 modelData 代表 model 中的对象: 直接看 repeater_objects.qml：

import QtQuick 2.2

Rectangle {
    width: 320
    height: 200
    color: "#EEEEEE"

    Column {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4
        Repeater {
            model: [
                {"name":"Zhang San", "mobile":"13888888888"},
                {"name":"Wang Er", "mobile":"13999999999"},
                {"name":"Liu Wu", "mobile":"15866666666"},
            ]
            Row {
                height: 30
                Text{
                    width: 100
                    color: "blue"
                    font.pointSize: 13
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    text: modelData.name
                }
                Text{
                    width: 200
                    font.pointSize: 13
                    verticalAlignment: Text.AlignVCenter
                    text: modelData.mobile
                }
            }
        }
    }
}

注意，在 delegate 内将 modelData 作为对象使用，直接访问它的属性。

model为ListModel
model 也可以是 ListModel 或者 QAbstractltemModel 的派生类。此时在 delegate 内可以通过 role-name 访问 model 内的数据。

repeaterlistmodel.qml 展示了如何使用 ListModel：

import QtQuick 2.2
Rectangle {
    width: 300
    height: 200
    color: "#EEEEEE"
    Column {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4
        Repeater {
            model: ListModel {
                ListElement{
                    name: "MI4"
                    cost: "1999"
                    manufacturer: "Xiaomi"
                }
                ListElement{
                    name: "MX4"
                    cost: "1999"
                    manufacturer: "Meizu"
                }
                ListElement{
                    name: "iPhone6"
                    cost: "5500"
                    manufacturer: "Apple"
                }
                ListElement{
                    name: "C199"
                    cost: "1599"
                    manufacturer: "Huawei"
                }
            }
            Row {
                height: 30
                Text{
                    width: 120
                    color: "blue"
                    font.pointSize: 14
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    text: name
                }
                Text{
                    width: 100
                    font.pointSize: 14
                    verticalAlignment: Text.AlignVCenter
                    text: cost
                }
                Text{
                    width: 100
                    font.pointSize: 12
                    verticalAlignment: Text.AlignVCenter
                    text: manufacturer
                }
            }
        }
    }
}