Qt Quick矩形点击显示名称及按钮联动点击问题求助

问题1：点击矩形提示name is not defined的解决 #

原代码存在两个核心错误：

• 错误使用小写mouseArea，QML中这是标准组件，需写成大写MouseArea
• 访问name属性的方式错误，rectangle.name未定义，需将model中的name绑定到矩形，或直接访问model.name

问题2：点击按钮触发矩形点击事件的解决 #

可在按钮的点击信号中，手动触发矩形内MouseArea的点击信号，或抽离共用逻辑实现联动。

修正后的完整代码 #

Window {
    width: 800
    height: 300
    visible: true

    ColumnLayout {
        spacing: 10

        Text {
            text: "Eclairage"
        }

        RowLayout {
            spacing: 10

            Repeater {
                model: rectangleModel

                Rectangle {
                    id: rectangle
                    width: 100
                    height: 100
                    color: model.rectangleColor
                    // 将model的name绑定到矩形属性，方便统一引用
                    property string name: model.name
                    // 绑定自定义id字段，用于后端操作
                    property int itemId: model.itemId

                    Button {
                        anchors.centerIn: parent
                        text: model.buttonText
                        // 点击按钮时触发矩形MouseArea的点击事件
                        onClicked: rectMouseArea.clicked()
                    }

                    // 标准MouseArea组件，覆盖整个矩形
                    MouseArea {
                        id: rectMouseArea
                        anchors.fill: parent
                        onClicked: {
                            console.log("矩形点击，id:", rectangle.itemId, "name:", rectangle.name)
                            // 此处添加后端操作逻辑，比如传递id/name给后端接口
                        }
                    }
                }
            }
        }
    }

    ListModel {
        id: rectangleModel
        ListElement {
            // ListElement内置id属性无法被外部访问，改用自定义itemId存储标识
            itemId: 1
            name:"principale"
            buttonText: "Button 1"
            rectangleColor: "lightblue"
        }
        ListElement {
            itemId: 2
            name:"heartbutton"
            buttonText: "Button 2"
            rectangleColor: "lightgreen"
        }
        ListElement {
            itemId: 3
            name:"lightbutton"
            buttonText: "Button 3"
            rectangleColor: "lightyellow"
        }
    }
}

关键修改点说明 #

• MouseArea组件修正：替换错误的小写写法为标准MouseArea组件，设置anchors.fill: parent确保点击区域覆盖整个矩形
• 属性绑定优化：给矩形绑定name和itemId属性，直接关联model中的对应值，便于后端操作时获取标识
• 按钮联动实现：通过rectMouseArea.clicked()直接触发MouseArea的点击信号，复用矩形的点击处理逻辑
• ListElement标识修正：替换无效的内置id为自定义itemId，避免QML内部属性冲突，确保后端能正确获取唯一标识

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