Problems with accessing individual Repeater Items and with MouseArea



  • 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"
                    }
    


  • 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



  • @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?



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.