How to change properties of random repeater's children

[newbiSoso]

I have a grid that is like this:

    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]

...
Grid{
        rows: 5
        columns: 5
        spacing: 5
        anchors.centerIn: parent
        Repeater{
            id: gridRect
            model: 25
            Rectangle{
                id: rect
                width: 50
                height: width
                color: "white"
                radius: 5
                Text {
                    id: tttt
                    anchors.centerIn: parent
                    color: "lightBlue"
                    text : index
                }
                MouseArea{
                    anchors.fill: parent
                }

            }
        }

    }

and I want to change the color of rect elements in the grid and the text randomly so I made these timers:

Timer {
        id: alfa
        interval: 500; running: true; repeat: true
        onTriggered: {
            
            /*if random square not white , a color from color array is picked to change it
            else random square.color = "white"*/
        }

    }
    Timer {
        id: beta
        interval: 1000; running: true; repeat: true
        onTriggered: {
           //changes the text of a random tttt element in the grid
        }
    }

but I don't know how to access these elements individually, I tried many things but it all failed, and using a property seemed to change the whole grid color & text not a single square, I can't understand how to access nested elements and repeaters children at all what should I do?

[dheerendra]

All the elements defined inside the repeater becomes child of your Grid. So you can access the grid children using <id>.children[] property.

for (var i=0;i<grid.children.length;i++) {
       var obj = grid.children[i];
       obj.color = "green"
}

[Shrinidhi Upadhyaya]

Hi @newbiSoso ,

• You can also use a ListModel and assign it to the repeater.

Your code with sample model:-

property variant colorArray: ["cyan","#00bde3", "#67c111", "#ea7025"]

ListModel {
    id: dummyModel

    ListElement {
        squareColor: "white"
        txt: "Hello"
    }

    ListElement {
        squareColor: "white"
        txt: "Hello"
    }

    ListElement {
        squareColor: "white"
        txt: "Hello"
    }

    ListElement {
        squareColor: "white"
        txt: "Hello"
    }
}

Timer {
    id: alfa

    interval: 500; running: true; repeat: true
    onTriggered: {
        for (var i=0;i<dummyModel.count;i++) {
            if(dummyModel.get(i).squareColor === "white") {
                dummyModel.setProperty(i,"squareColor",colorArray[i])
            } else {
                dummyModel.setProperty(i,"squareColor","white")
            }
        }
    }
}

Timer {
    id: beta

    interval: 1000; running: true; repeat: true
    onTriggered: {
        for (var i=0;i<dummyModel.count;i++) {
            if(dummyModel.get(i).txt === "Hello") {
                dummyModel.setProperty(i,"txt","Bye")
            } else {
                dummyModel.setProperty(i,"txt","Hello")
            }
        }
    }
}

Grid{
    id: grid

    rows: 2
    columns: 2
    spacing: 5
    anchors.centerIn: parent

    Repeater{
        id: gridRect

        model: dummyModel

        Rectangle{
            id: rect

            width: 50
            height: width
            color: squareColor
            radius: 5

            Text {
                id: tttt

                anchors.centerIn: parent
                color: "lightBlue"
                text : txt
            }
            MouseArea{
                anchors.fill: parent
            }
        }
    }
}

Sample Output:-

For more information about ListModel[https://doc.qt.io/qt-5/qml-qtqml-models-listmodel.html]