clickable rectangles with different name property

Question

I am trying to do 3 different rectangles with different id and name so i could use them in backend , this my code :

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

                    Button {
                        anchors.centerIn: parent
                        text: model.buttonText
                    }
             mouseArea:{
                     onClicked:console.log(rectangle.name)


                }


        

            }
        }
    }


    ListModel {
        id: rectangleModel
        ListElement {
            id:1
            name:"principale"
            buttonText: "Button 1"
            rectangleColor: "lightblue"

        }
        ListElement {
            id:2
            name:"heartbutton"
            buttonText: "Button 2"
            rectangleColor: "lightgreen"
        }
        ListElement {
            id:3
            name:"lightbutton"
            buttonText: "Button 3"
            rectangleColor: "lightyellow"
        }
    }

   
}

• i want to see rectangle name when i do clicked on a rectangle but it showed me an error name is not defined

• im also trying to do like when i do click on the button , the rectangle is clicked too and that it's not worked without each rectangle id , like :

  mouseArea{ if(buttonid == isClicked) onClicked: console.log(rectanleid.name) }

Answer 1

So you want to see the name of the ListElement object when you click on a button and here you go.

Window {
    width: 800
    height: 300
    visible: true

    Column {
        spacing: 10

        Text {
            text: "Eclairage"
        }

        Row {
            spacing: 10
            Repeater {
                model: rectangleModel

                Rectangle {
                    id:rectangle
                    width: 100
                    height: 100
                    color: model.rectangleColor

                    Button {
                        anchors.centerIn: parent
                        text: model.buttonText

                        onClicked: {
                            console.log(model.name)
                        }
                    }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                         console.log(model.name)
                    }
                }
            }
        }
    }



        ListModel {
            id: rectangleModel
            ListElement {
                //id:1
                name:"principale"
                buttonText: "Button 1"
                rectangleColor: "lightblue"

            }
            ListElement {
                //id:2
                name:"heartbutton"
                buttonText: "Button 2"
                rectangleColor: "lightgreen"
            }
            ListElement {
               // id:3
                name:"lightbutton"
                buttonText: "Button 3"
                rectangleColor: "lightyellow"
            }
        }
    }
}