qml Repeater 详解

1. 概述

Repeater 是 Qt Quick 中用于动态创建重复元素的容器组件。它通过指定一个模型数据（如数组或列表）来创建多个相同类型的子项，并将这些子项按顺序渲染在界面上。Repeater 是一种非常有效的方式来处理动态生成的用户界面元素，尤其是当你需要根据数据源生成多个相似控件时。

Repeater 可以与数据模型（例如 ListModel 或 Array）结合使用，通过循环创建子项。子项会根据模板进行创建，模板通常是一个 QML 组件或元素。

2. 重要属性

• model：绑定一个模型数据，可以是 ListModel、Array 或其他适配的数据源。Repeater 会根据此模型的数据动态生成多个子项。

• delegate：指定一个 QML 组件或元素，作为重复生成的每个子项的模板。每个模型项都会根据此模板创建对应的子项。

• count：定义重复创建的子项数量。如果设置为数字，Repeater 将根据该数量创建指定数量的子项。如果绑定到一个模型，count 会自动等于模型的项数。

• item：表示当前重复的子项。它是一个只读属性，指向当前生成的子项。

• visible：控制 Repeater 本身是否可见。设置为 false 时，Repeater 会隐藏，但是它仍然会按需创建子项。

• anchors：控制 Repeater 本身在父元素中的位置。

3. 重要方法

• clear()：清空所有已创建的子项。如果需要重新加载模型数据或清除当前生成的子项，可以使用此方法。

• itemAt(index)：根据索引获取指定的子项。如果需要访问某个特定位置的子项，可以使用此方法。

• removeItem(index)：从 Repeater 中移除某个子项。通过此方法，可以动态删除指定索引位置的子项。

• addItem()：向 Repeater 添加新的子项。该方法在大多数情况下不常用，因为 Repeater 通常由绑定的模型动态管理，但在某些特殊情况下，它可以用来动态添加子项。

4. 重要信号

• onItemAdded：当新的子项被添加时，触发该信号。可以用此信号来执行子项创建后的操作，如设置子项的属性或添加额外功能。

• onItemRemoved：当子项被移除时，触发此信号。该信号可以用来清理子项的相关资源或做其他必要的处理。

• onCountChanged：当 count 属性的值发生变化时，触发此信号。这通常用于监听模型数据的变化或动态调整重复项的数量。

• onModelChanged：当 model 属性发生变化时，触发该信号。通常用于在绑定到模型时，监听模型数据的更新。

5. 常用枚举类型

• Qt.Alignment：用于指定子项对齐方式的枚举类型。常用值有：

  • Qt.AlignLeft：左对齐
  • Qt.AlignRight：右对齐
  • Qt.AlignTop：顶部对齐
  • Qt.AlignBottom：底部对齐
  • Qt.AlignCenter：居中对齐

Window {
    visible: true
    width: 640
    height: 480
    title: "Repeater 示例"

    // 数据模型
    ListModel {
        id: colorModel
        ListElement { color: "red"; name: "红色" }
        ListElement { color: "green"; name: "绿色" }
        ListElement { color: "blue"; name: "蓝色" }
        ListElement { color: "yellow"; name: "黄色" }
        ListElement { color: "purple"; name: "紫色" }
    }

    Column {
        id: columnLayout
        anchors.centerIn: parent
        spacing: 20
        padding: 20
        width: 300
        height: 400
        visible: true
        enabled: true
        clip: true

        Repeater {
            id: repeater
            model: colorModel
            delegate: Rectangle {
                width: parent.width
                height: 50
                color: model.color
                border.color: "black"
                border.width: 1

                Text {
                    text: model.name
                    anchors.centerIn: parent
                    color: "white"
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log("点击了 " + model.name)
                    }
                }
            }

            onCountChanged: {
                console.log("生成的子项数量发生变化: " + count)
            }
        }

    }
    Rectangle {
        id: controlRect
        width: 150
        height: 50
        color: "green"

        Text {
            text: "点击添加颜色"
            anchors.centerIn: parent
            color: "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                colorModel.append({ color: "orange", name: "橙色" })
            }
        }
    }

    Rectangle {
        id: removeControlRect
        width: 150
        height: 50
        color: "red"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: controlRect.bottom
        anchors.margins: 10

        Text {
            text: "点击移除颜色"
            anchors.centerIn: parent
            color: "white"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (colorModel.count > 0) {
                    colorModel.remove(0)
                }
            }
        }
    }

}

觉得有帮助的话，打赏一下呗。。

           

需要商务合作（定制程序）的欢迎私信！！