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.
    0_1485039015851_Screenshot at 2017-01-21 22:30:14.png


  • Moderators

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



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

  • Moderators

    @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.



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


  • Moderators

    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.



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.