QML之Repeater重复器

介绍Repeater重复器的使用方法，应用场景。

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

简单示例

• 利用Repeater创建三个Rectangle，并通过model数组向其暴露数据，最后使用Row水平布局显示。

Row {
    Repeater {
        model: ["red", "blue", "green"]

        Rectangle {
            width: 80; height: 50
            color: modelData
        }
    }
}

• 效果：

main_page.png

使用文档

1. 属性：

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

2. 信号：

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

3. 方法：

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

使用场景

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

复杂示例

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

Row {
    Repeater {
        id: repeater
        model: myModel
        delegate: myDelegate
        onItemAdded: console.log("Add Item.", index, item.color)
        onItemRemoved: console.log("Remove Item.", index, item.color)
    }
}

更多精彩内容请关注公众号Qt君。