QML change Color of nested Rectangle in GridView

[nnicou]

Hello,

I created a QML Component with alot of nested rectangles and then i used a GridView to create my Interface. My next step is to change colors in each rectangle depending on a c++ code but i will try to use javascript to get the job done and just emit my information to the function. I did try to change the color(by caling rectangle's id) by copying the whole QML file in the delegate region but the button is not clicklable. The image below shows my GridlView and the components.

[p3c0]

@nnicou GridView accepts model. So it would be better if you manipulate the delegate data through it.

[nnicou]

I found the solution to my first problem by Using Grid instead of GridView. A small example to show my answer.

Column{
            spacing:2


             Grid{
                 id:grid
                 columns: 2
                 rows:2
                 spacing: 10
                 Repeater{
                     model:4
                     Rectangle{
                        id:rect1
                        width:100
                        height:100
                        color:"red"
                        Rectangle{
                            id:rect2
                            width:25
                            height: 25
                            color:"black"
                            anchors.horizontalCenter: rect1.horizontalCenter
                            anchors.verticalCenter: rect1.verticalCenter
                            }
    
                     }
                 }
             }
             Button{
                text:"Click me"
                  width:50
                 height:50
                 onClicked: {
                     for (var i = 0; i <grid.children.length; ++i)
                       grid.children[i].children[0].color="green";
                 }
               }


            }

[p3c0]

@nnicou Great but if you have models other than Integers then it is recommended to store and update the state in the model and which will then update the delegate.

[nnicou]

Do you have any reference that will help me understand this concept. Basically i will change only colors at the time but i will need to update something like a table with strings emitted from c++ in javescript but in a later stage.

Thank you in advance!

[p3c0]

The basic concept is that the state is stored in the model itself. These are called roles. So if we consider a pure QML based model viz. ListModel you can see roles stored inside ListModel. We just have to store initial value in them and then later we can update them using the methods ListModel provides.
Similar goes for C++ models for eg. QAbstractItemModel.

[nnicou]

Thank you in advance i will go read the documentation to understand it more thoroughly:)