QML之Repeater重复器

àì夳堔傛蜴生んèń 2023-06-22 04:25 10阅读 0赞

> 介绍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][main_page.png]

## 使用文档 ##

1.  属性：

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

1.  信号：

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

1.  方法：

*  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君**。

[main_page.png]: https://img-blog.csdnimg.cn/20191213223415543.png