QML change Color of nested Rectangle in GridView
-
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.
-
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"; } } }
-
-
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!
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 insideListModel
. We just have to store initial value in them and then later we can update them using the methodsListModel
provides.
Similar goes for C++ models for eg.QAbstractItemModel
.