QML之Repeater重复器

Qt君

发布于 2019-12-25 11:13:27

2.8K0

发布于 2019-12-25 11:13:27

文章被收录于专栏：跟Qt君学编程跟Qt君学编程

介绍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
        }
    }
}

效果：

使用文档

属性：

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

信号：

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

方法：

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-12-13，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法