QML Repeater详解

1.简介

Repeater类型用于创建大量类似的项，像其他视图类型一样，Repeater有一个模型和一个委托:对于模型中的每个条目，委托在一个上下文中实例化，该上下文使用来自模型的数据。

属性：

count : int ：保存模型中的项数

delegate : Component ：委托提供了一个模板，定义了由 Repeater 实例化的每个项目。

model : any ：提供数据。

此属性可以设置为任何支持的数据模型:

• 委托数量的数字类型
• 一个模型(例如一个ListModel项，或者一个QAbstractItemModel子类)
• 字符串列表
• 对象列表

2.示例

示例1：水平方向上，重复3个Rectangle，model为数字。

 

Window {
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")

    Row {
        Repeater {
            model: 3
            Rectangle {
                width: 100; height: 40
                border.width: 1
                color: "yellow"
            }
        }
    }
}

示例2：model改为字符串列表。

Window {
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")

    Row {
        Repeater {
            //model: 3
            model: ["one","two","three"]
            Button {
                width: 100; height: 40
                text: modelData
            }
        }
    }
}

 示例3：model改为对象列表。

Window {
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")

    Row {
        Repeater {
            //model: 3
            model: [{"name":"zhangsan","age":"15"},
                    {"name":"lisi","age":"16"},
                    {"name":"wangwu","age":"17"}]

            Button {
                width: 100; height: 40
                text: modelData.name + modelData.age
            }
        }
    }
}

示例4：model改为ListModel。

Window {
    visible: true
    width: 700
    height: 700
    title: qsTr("Hello World")

    Row {
        Repeater {
            //model: 3
            model: ListModel{
                ListElement{
                    name:"zhangsan"
                    age:16
                }
                ListElement{
                    name:"lisi"
                    age:17
                }
            }

            Button {
                width: 100; height: 40
                text:name+age
            }
        }
    }
}