2、QML之Repeater重复器

qq_39075859

已于 2022-08-19 00:11:56 修改

阅读量1k

点赞数 2

分类专栏： Qt工作积累文章标签： javascript 开发语言 ecmascript

于 2022-08-16 16:16:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39075859/article/details/126368007

版权

Qt工作积累专栏收录该内容

4 篇文章

订阅专栏

本文介绍了QML中的Repeater组件，它用于创建和展示大量相似的界面项。Repeater通常与布局控件如Row、Column、Grid结合使用。文章详细讲解了Repeater的属性（count、delegate、model）、信号（itemAdded、itemRemoved）和方法（itemAt）。此外，还给出了使用示例，展示了如何结合ListModel和Delegate来创建和响应项的增删。Repeater适用于简单的重复项展示，对于少量项，使用Repeater比ListView等视图控件在性能上有优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载

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