Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. QML change Color of nested Rectangle in GridView
Forum Update on Monday, May 27th 2025

QML change Color of nested Rectangle in GridView

Scheduled Pinned Locked Moved Solved General and Desktop
7 Posts 2 Posters 2.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • N Offline
    N Offline
    nnicou
    wrote on 21 Jan 2017, 22:48 last edited by nnicou
    #1

    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

    1 Reply Last reply
    0
    • P Offline
      P Offline
      p3c0
      Moderators
      wrote on 22 Jan 2017, 01:48 last edited by p3c0
      #2

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

      157

      1 Reply Last reply
      0
      • N Offline
        N Offline
        nnicou
        wrote on 22 Jan 2017, 12:25 last edited by nnicou
        #3

        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";
                         }
                       }
        
        
                    }
        1 Reply Last reply
        0
        • P Offline
          P Offline
          p3c0
          Moderators
          wrote on 22 Jan 2017, 15:54 last edited by
          #4

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

          157

          1 Reply Last reply
          0
          • N Offline
            N Offline
            nnicou
            wrote on 22 Jan 2017, 16:29 last edited by
            #5

            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!

            P 1 Reply Last reply 22 Jan 2017, 16:44
            0
            • N nnicou
              22 Jan 2017, 16:29

              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!

              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 22 Jan 2017, 16:44 last edited by
              #6

              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.

              157

              1 Reply Last reply
              2
              • N Offline
                N Offline
                nnicou
                wrote on 23 Jan 2017, 19:01 last edited by
                #7

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

                1 Reply Last reply
                0

                1/7

                21 Jan 2017, 22:48

                • Login

                • Login or register to search.
                1 out of 7
                • First post
                  1/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved