clickable rectangles with different name property

San12

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

JoeCFD

@San12 you need something like:
rectangleModel.get( index ).name
but not rectangle.name. Name is defined in the model.

Sneha Suresh

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 800
    height: 300
    visible: true

    ColumnLayout {
        spacing: 10

        Text {
            text: "Eclairage"
        }

        RowLayout {
            spacing: 10

            Repeater {
                model: rectangleModel

                Button {
                    id:rectangle
                    width: 100
                    height: 100
                    //anchors.centerIn: parent
                    text: model.buttonText
                    onClicked:console.log(model.name)

                    Rectangle{
                        anchors.fill: parent
                        color: model.rectangleColor
                    }
                }
            }
        }
    }

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

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

Instead of using the rectangle.name to print the names in the model try using model.name.

Markkyboy

@San12 - are you looking to control some lights over wifi?