Qt Quick：如何在QML中避免创建相似GUI元素时代码重复？

1. 自定义可复用QML组件 #

QML没有传统意义上的“构造函数调用”，但你可以把重复的GUI元素封装成独立的QML组件，用法和内置组件完全一致。

比如创建一个名为CustomGridItem.qml的文件，内容如下：

Rectangle {
    width: 100
    height: 100
    color: "#f0f0f0"

    Image {
        anchors.centerIn: parent
        source: "your-image-path.png"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Item clicked")
        }
    }
}

然后在主QML文件中直接实例化，只需传入不同的位置参数：

CustomGridItem { x: 0; y: 0 }
CustomGridItem { x: 110; y: 0 }
CustomGridItem { x: 220; y: 0 }
CustomGridItem { x: 0; y: 110 }
// ... 补充剩下的5个实例，按需设置x/y值

2. 结合Repeater与自定义组件（批量重复场景） #

既然你已经了解Repeater，结合自定义组件能更高效处理批量创建：

如果是规则网格布局，无需手动逐个写位置，通过index计算即可：

Grid {
    columns: 3
    rows: 3
    spacing: 10

    Repeater {
        model: 9
        delegate: CustomGridItem {
            x: (index % 3) * (width + spacing)
            y: Math.floor(index / 3) * (height + spacing)
        }
    }
}

如果是不规则位置，用ListModel存储坐标数据：

Repeater {
    model: ListModel {
        ListElement { posX: 0; posY: 0 }
        ListElement { posX: 150; posY: 50 }
        ListElement { posX: 300; posY: 100 }
        // ... 补充剩下的6个位置
    }

    delegate: CustomGridItem {
        x: model.posX
        y: model.posY
    }
}

3. 其他简化技巧 #

• 暴露可配置属性：在自定义组件中添加自定义属性（比如property string imgSource: "default.png"），方便实例化时差异化配置，避免重复写内部元素代码
• 默认值优化：给组件属性设置合理默认值，减少实例化时的重复参数传递

内容的提问来源于stack exchange，提问作者user20443994