Problems with accessing individual Repeater Items and with MouseArea

[MilloMille]

Hi,
I used the Repeater to create a rather large number of identical clickable circles. In addition, there are three Buttons: Select All, Select None & Done.

If you click on a click on a circle the color should turn form transparent to grey. If you click it again the color should change again. This is my first problem: Once the circle changed the color the first time, there is no changing possible anymore.

My second problem is to access the Repeater items. I know you can access certain items via itemAt(). But is there also a option to access all items at once. I would need this to set the color of all items at once and also to send the property color of every single items to my .cpp file.

Here is my code (reduced to the very essentials of the problem)

property color wellcolor: "transparent"           // with the "Select All" Button i set this property to grey

Repeater {
                            model: 48
                            Rectangle {
                                id: smallcircle
                                color: wellcolor
                                MouseArea {
                                    id:wellselected
                                    anchors.fill:parent
                                    onClicked: smallcircle.color= "darkgrey"            // Here I change the actual color and not the property wellcolor. I know that this is bad coding but i found no other solution
                                }
                            }
                        }

And here the Button "Select all"

Rectangle {                        // Push Button: All wells selected
            Text {
                anchors.centerIn: parent
                text: "All"
            }

            MouseArea {
                id:allsmall
                anchors.fill:parent
                onClicked: wellcolor = "darkgrey"
                }

[dheerendra]

For first problem inside the clicked signal check existing colour and then change accordingly.
If small circle.color equals gray change to new color els to gray. Use qt.colorequal function to check it. To access all the children's use children function. See item documentation for this

[MilloMille]

@dheerendra said in Problems with accessing individual Repeater Items and with MouseArea:

For first problem inside the clicked signal check existing colour and then change accordingly.
If small circle.color equals gray change to new color els to gray. Use qt.colorequal function to check it.

Thís worked very well thank you!

@dheerendra said in Problems with accessing individual Repeater Items and with MouseArea:

To access all the children's use children function. See item documentation for this

I tried this before and i tried it again but I don't understand how this works. If i type

console.log(smallrep.children)   

whereas smallrep is the id of the Repeater, I get [object Object]

smallrep.children.color

returns undefined.
If I add an index after children, I get Connot read porperty 'color' of undefinied
According to the Item documentation the children function returns a list of Items/QObjects. But how can I change/read the color proterty of items with the children function?

[MilloMille]

Ok i finally got it work, although i used a different approach since i couldnt get the children function to work. I think the code should be fine also:

Repeater {
         model: 48
         Rectangle {
                 id: smallcircle
                 MouseArea {
                         id:wellselected
                         anchors.fill:parent
                         onClicked: Qt.colorEqual("tansparent", (smallcircle.color)) ? smallcircle.color="darkgrey" : smallcircle.color="transparent" 
                                }
                            }
                        }

Thanks again for the tip with the qt.colorEqual-function, I liek this solution very much.
And for the "select all wells"-button

Rectangle {                        // Push Button: All wells selected
            Text {
                anchors.centerIn: parent
                text: "All"
            }
            MouseArea {
                id:allsmall
                anchors.fill:parent
                onClicked: {
                          for (var i=0; i<48; i++)
                                   smallrep.itemAt(i).color = "darkgrey"
                }
}

This also works very well, but it still kinda bothers me i couldnt get it to work with the children function