listView delegate rect color, alternate 10 item red 10 blue



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


  • Qt Champions 2017

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


  • Qt Champions 2017

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



  • Yes but 15..,

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



  • 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



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


  • @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"
    


  • @Diracsbracket perfct ! thx


Log in to reply
 

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