Solved 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 blueListView{ 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 blueCan someone tell me how to do this please ?
-
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).
-
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 delegateTo alternate every 5:
color: (index%10<5) ? "red" : "blue"
-
@Diracsbracket perfct ! thx