qml Repeater 详解

创作时间:

作者:

@小白创作中心

qml Repeater 详解

引用

CSDN

https://m.blog.csdn.net/ckg3824278/article/details/145059727

概述

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

重要属性

model：绑定一个模型数据，可以是ListModel、Array或其他适配的数据源。Repeater会根据此模型的数据动态生成多个子项。
delegate：指定一个QML组件或元素，作为重复生成的每个子项的模板。每个模型项都会根据此模板创建对应的子项。
count：定义重复创建的子项数量。如果设置为数字，Repeater将根据该数量创建指定数量的子项。如果绑定到一个模型，count会自动等于模型的项数。
item：表示当前重复的子项。它是一个只读属性，指向当前生成的子项。
visible：控制Repeater本身是否可见。设置为false时，Repeater会隐藏，但是它仍然会按需创建子项。
anchors：控制Repeater本身在父元素中的位置。

重要方法

clear()：清空所有已创建的子项。如果需要重新加载模型数据或清除当前生成的子项，可以使用此方法。
itemAt(index)：根据索引获取指定的子项。如果需要访问某个特定位置的子项，可以使用此方法。
removeItem(index)：从Repeater中移除某个子项。通过此方法，可以动态删除指定索引位置的子项。
addItem()：向Repeater添加新的子项。该方法在大多数情况下不常用，因为Repeater通常由绑定的模型动态管理，但在某些特殊情况下，它可以用来动态添加子项。

重要信号

onItemAdded：当新的子项被添加时，触发该信号。可以用此信号来执行子项创建后的操作，如设置子项的属性或添加额外功能。
onItemRemoved：当子项被移除时，触发此信号。该信号可以用来清理子项的相关资源或做其他必要的处理。
onCountChanged：当count属性的值发生变化时，触发此信号。这通常用于监听模型数据的变化或动态调整重复项的数量。
onModelChanged：当model属性发生变化时，触发此信号。通常用于在绑定到模型时，监听模型数据的更新。

常用枚举类型

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