Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to change properties of random repeater's children



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


  • Qt Champions 2017

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


  • 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:-

    0_1560399884166_61847972-899b-48c7-b394-2b9822e27178-image.png

    0_1560399903231_1f6b9848-25ec-4ab4-8ac6-c29c02bd45f4-image.png

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


Log in to reply