2、QML之Repeater重复器

转载

1、简介

Repeater控件用于创建大量类似的项。与其他视图控件(ListView，PathView)类似。单纯使用Repeater控件没多大作用，一般与布局类控件(Row，Column，Grid)搭配使用。

2、使用文档

2.1、属性：

count：共有多少实例项。
delegate：用于界面显示的委托项(当Repeater下只有一个控件时可以省略写该标记)。
model：数据模型项，用于为delegate提供数据支持。

2.2、信号：

itemAdded(int index, Item item)：当Repeater有项增加时触发该信号。
itemRemoved(int index, Item item)：当Repeater有项被移除时触发该信号。

2.3、方法：

Item itemAt(index)：通过下标查找Repeater的项。

3、使用场景

Repeater更多的作用是用于展示多个重复项，不是用来交互(滑动)。
仅仅是用于项比较少的情况下，用Repeater代替ListView等视图项会有性能上的提升。

4、示例

    ListModel {
        /* 数据项 */
        id: myModel
        ListElement { colour: "red"; }
        ListElement { colour: "blue"; }
        ListElement { colour: "green"; }
    }

    Component {
        /* 代理项(实例),可以自己通过布局修饰 */
        id: myDelegate
        Rectangle {
            width: 80; height: 50
            color: colour /* 通过数据项(model)映射获得。 */

            MouseArea {
                anchors.fill: parent
                /* 点击添加一个数据项，界面因此会多一个项显示。 */
                onClicked: myModel.append({colour: "lightblue"})
            }
        }
    }
    
    Grid {
        columns: 2
        Repeater {
         id: repeater
         model: myModel
         delegate: myDelegate
         onItemAdded: console.log("Add Item.", index, item.color)
         onItemRemoved: console.log("Remove Item.", index, item.color)
        }
    }