Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. listView delegate rect color, alternate 10 item red 10 blue
Forum Updated to NodeBB v4.3 + New Features

listView delegate rect color, alternate 10 item red 10 blue

Scheduled Pinned Locked Moved Solved QML and Qt Quick
9 Posts 3 Posters 1.1k 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.
  • ODБOïO Offline
    ODБOïO Offline
    ODБOï
    wrote on last edited by ODБOï
    #1

    Hi,
    As my title describes i'm trying to have 10 item red and 10 blue

     ListView{     
            model: objectModel
            delegate: Rectangle{
                    height: 15
                    width: parent.width
                    color : getColorind(index)
               Text{
                        text: index + " :  " +  _name   + "  :  "  + _value
                }
            }
        }
    
    
     property bool _red : true
     property int colorCall: 0
    
        function getColorind(ind){
         var _color
            if(_red&& colorCall<10){
                _color = "red"
                colorCall++
                if(colorCall===10){
                    _red=false
                }
            }else{
                _color = "blue"
                colorCall--
                if(colorCall===0){
                    _red=true
                }
            }
           return _color
        }
    

    output : qrc:/main.qml:314:19: QML Rectangle: Binding loop detected for property "color"
    and everything is blue

    Can someone tell me how to do this please ?

    1 Reply Last reply
    0
    • dheerendraD Offline
      dheerendraD Offline
      dheerendra
      Qt Champions 2022
      wrote on last edited by
      #2

      Do you have twenty items in the model ? Delegate will be instantiated based on how many elements are there in model.

      Just try with color : (index%2==0)?"blue":"red".

      This will have alternate color based on model size.

      Dheerendra
      @Community Service
      Certified Qt Specialist
      http://www.pthinks.com

      1 Reply Last reply
      0
      • ODБOïO Offline
        ODБOïO Offline
        ODБOï
        wrote on last edited by
        #3

        @dheerendra thx,
        no there are more than 1000 items and in real life it is 15 red 15 blue,
        with color : (index%2==0)?"blue":"red". i will have 1 red one blue, one red one blue and so on... this is not what i need.

        When app starts, model is empty, then i'm adding that 1000 items in on go (one js function).

        1 Reply Last reply
        0
        • dheerendraD Offline
          dheerendraD Offline
          dheerendra
          Qt Champions 2022
          wrote on last edited by
          #4

          You want first 10 items in red color and another 10 items in blue color. This should alternate ? Is that correct ?

          Dheerendra
          @Community Service
          Certified Qt Specialist
          http://www.pthinks.com

          1 Reply Last reply
          0
          • ODБOïO Offline
            ODБOïO Offline
            ODБOï
            wrote on last edited by
            #5

            Yes but 15..,

            every 15 item i want change color, if it is red change to blue; if it is blue chnge to red

            1 Reply Last reply
            0
            • ODБOïO Offline
              ODБOïO Offline
              ODБOï
              wrote on last edited by ODБOï
              #6

              it should look like something like this .. here color is changed every 4 items

              0 : item 1
              1 : item 1x
              2 : item1y
              3 : item1z

              4 : item2
              5 : item2x
              6 : item2y
              7 : item2z
              8 : item3
              9 : item3x
              10 : item3y
              11 : item3z

              1 Reply Last reply
              0
              • ODБOïO Offline
                ODБOïO Offline
                ODБOï
                wrote on last edited by
                #7

                Finally insted of calling a function on color assignment like i was doing :

                color : getColorind(index) // this was called every time i scroll the listview
                
                

                Im generating an array of colors based on number of elements in the listmodel and groupes (grouped same color item) size

                and then assign the color by index

                import QtQuick 2.9
                import QtQuick.Window 2.2
                Window {
                    visible: true
                    width: 640
                    height: 480
                
                    property int _groupsCount : 5
                    property int cnt : 55// items count
                    //here we will have 5 groups(of 11 items) of same color
                
                    property variant _colors:[]
                
                    function popModel(){//just populate the listmodel
                        for(var i = 0;i<cnt;i++){
                            mod.append({_name:"name",_value : i})
                        }
                    }
                    function getColorArr(){
                                var modelOk = cnt%_groupsCount===0 //number of items must be multiple of  _groupsCount
                                if(!modelOk){
                                     console.log("bad")
                        //            //return
                                }
                        var _red=true
                
                        var groups = cnt/_groupsCount
                
                        var currentGr = 0
                        var jcolors=[]
                        for (var i=0;i<cnt;i++){
                            if(currentGr<groups&&_red){
                                jcolors[i]="red"
                                currentGr++
                                if(currentGr===groups)_red=false
                            }else{
                                jcolors[i]="blue"
                                currentGr--
                                if(currentGr===0)_red=true
                            }
                        }
                        _colors = jcolors
                    }
                
                    Component.onCompleted:{ getColorArr(); popModel();}
                
                    ListModel{
                        id:mod
                    }
                
                    ListView{
                        height: parent.height
                        width: parent.width/2
                        model: mod
                        spacing: 5
                        delegate:
                            Rectangle{
                            color:_colors[index]
                            height: 16
                            width: parent.width/2
                            Text {
                                text: _name + " : " + _value
                                height: 16
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }
                }
                
                DiracsbracketD 1 Reply Last reply
                0
                • ODБOïO ODБOï

                  Finally insted of calling a function on color assignment like i was doing :

                  color : getColorind(index) // this was called every time i scroll the listview
                  
                  

                  Im generating an array of colors based on number of elements in the listmodel and groupes (grouped same color item) size

                  and then assign the color by index

                  import QtQuick 2.9
                  import QtQuick.Window 2.2
                  Window {
                      visible: true
                      width: 640
                      height: 480
                  
                      property int _groupsCount : 5
                      property int cnt : 55// items count
                      //here we will have 5 groups(of 11 items) of same color
                  
                      property variant _colors:[]
                  
                      function popModel(){//just populate the listmodel
                          for(var i = 0;i<cnt;i++){
                              mod.append({_name:"name",_value : i})
                          }
                      }
                      function getColorArr(){
                                  var modelOk = cnt%_groupsCount===0 //number of items must be multiple of  _groupsCount
                                  if(!modelOk){
                                       console.log("bad")
                          //            //return
                                  }
                          var _red=true
                  
                          var groups = cnt/_groupsCount
                  
                          var currentGr = 0
                          var jcolors=[]
                          for (var i=0;i<cnt;i++){
                              if(currentGr<groups&&_red){
                                  jcolors[i]="red"
                                  currentGr++
                                  if(currentGr===groups)_red=false
                              }else{
                                  jcolors[i]="blue"
                                  currentGr--
                                  if(currentGr===0)_red=true
                              }
                          }
                          _colors = jcolors
                      }
                  
                      Component.onCompleted:{ getColorArr(); popModel();}
                  
                      ListModel{
                          id:mod
                      }
                  
                      ListView{
                          height: parent.height
                          width: parent.width/2
                          model: mod
                          spacing: 5
                          delegate:
                              Rectangle{
                              color:_colors[index]
                              height: 16
                              width: parent.width/2
                              Text {
                                  text: _name + " : " + _value
                                  height: 16
                                  anchors.verticalCenter: parent.verticalCenter
                              }
                          }
                      }
                  }
                  
                  DiracsbracketD Offline
                  DiracsbracketD Offline
                  Diracsbracket
                  wrote on last edited by Diracsbracket
                  #8

                  @LeLev
                  You can do it much simpler using the remainder (mod) operator inside your delegate

                  To alternate every 5:

                  color: (index%10<5) ? "red" : "blue"
                  
                  ODБOïO 1 Reply Last reply
                  1
                  • DiracsbracketD Diracsbracket

                    @LeLev
                    You can do it much simpler using the remainder (mod) operator inside your delegate

                    To alternate every 5:

                    color: (index%10<5) ? "red" : "blue"
                    
                    ODБOïO Offline
                    ODБOïO Offline
                    ODБOï
                    wrote on last edited by
                    #9

                    @Diracsbracket perfct ! thx

                    1 Reply Last reply
                    0

                    • Login

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