QML 动态布局实战：Repeater 组件与数据模型的高效结合

1. Repeater组件基础入门

第一次接触QML的Repeater组件时，我就像发现了一个神奇的复制粘贴工具。想象一下，你需要在界面上展示20个风格相同的按钮，传统做法是手动复制20次Button代码，而Repeater只需要几行配置就能自动生成。这个组件本质上是个"控件生成器"，它根据数据模型（model）自动创建指定数量、相同模板（delegate）的控件。

基础语法结构其实很简单：

Repeater {
    model: 5  // 数据模型，这里直接指定数量
    delegate: Rectangle {  // 每个项目的模板
        width: 100
        height: 50
        color: "lightblue"
    }
}

但实际开发中，我们更常用的是结合数据模型。比如用ListModel存储一组数据：

ListModel {
    id: fruitModel
    ListElement { name: "Apple"; color: "red" }
    ListElement { name: "Banana"; color: "yellow" }
}

Repeater {
    model: fruitModel
    delegate: Rectangle {
        width: 100; height: 30
        color: model.color  // 访问模型数据
        Text { text: model.name }
    }
}

这里有个新手容易踩的坑：model和delegate的配合使用。model提供数据源，可以是简单的数字（表示生成数量），也可以是复杂的数据模型；delegate则定义每个项目的可视化呈现。当我在项目中第一次使用时，曾误将model写在delegate内部，导致始终只生成一个控件。

2. 动态数据绑定实战技巧

Repeater最强大的特性是数据绑定机制。记得有次开发仪表盘，需要实时显示传感器数据变化。传统方法需要手动更新每个控件，而用Repeater结合ListModel，数据变化时界面会自动刷新：

ListModel {
    id: sensorModel
    // 初始数据
    Component.onCompleted: {
        for (var i=0; i<5; i++) {
            append({"value": 0, "max": 100})
        }
    }
}

Repeater {
    model: sensorModel
    delegate: ProgressBar {
        width: 200
        value: model.value
        to: model.max
    }
}

// 模拟数据更新
Timer {
    interval: 1000
    running: true
    onTriggered: {
        for (var i=0; i<sensorModel.count; i++) {
            sensorModel.setProperty(i,