QML change Color of nested Rectangle in GridView
-
wrote on 21 Jan 2017, 22:48 last edited by 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.
-
@nnicou
GridView
accepts model. So it would be better if you manipulate the delegate data through it. -
wrote on 22 Jan 2017, 12:25 last edited by 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"; } } }
-
@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. -
wrote on 22 Jan 2017, 16:29 last edited by
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!
-
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
. -
wrote on 23 Jan 2017, 19:01 last edited by
Thank you in advance i will go read the documentation to understand it more thoroughly:)
1/7