listView delegate rect color, alternate 10 item red 10 blue

LeLev

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 ?

dheerendra

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.

LeLev

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

dheerendra

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

LeLev

Yes but 15..,

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

LeLev

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

LeLev

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

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"

LeLev

@Diracsbracket perfct ! thx