Alternating background color for ListViews
-
Setting the z value of the highlight appears to work with the latest Qt (from Fri Jul 30, sha dc63643). In the code below, setting the highlight z to 10 puts it above the other ListView items. It would be nice to position the highlight above the background and below the text, but I don't have an easy solution for that yet.
!http://media.share.ovi.com/m1/s/2332/b75ac0c7e9a84ab8b9f323da8eff7a54.jpg(list snapshot)!
@
import Qt 4.7Rectangle {
width: 200
height: 200
color: "#bebebe"Component { id: highlight Rectangle { width: list.width-1 height: list.currentItem.height-1 color: "lightsteelblue" border.color: "black" radius: 5 opacity: 0.5 z: 10 y: list.currentItem.y Behavior on y { SpringAnimation { spring: 3 damping: 0.2 } } } } ListView { id: list anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top anchors.bottom: parent.bottom model: itemModel delegate: itemDelegate highlight: highlight highlightFollowsCurrentItem: false focus: true } Component { id: itemDelegate Item { id: item width: parent.width - 15 height: row.height function altColor(i) { var colors = [ "#bebebe", "#b7b7b7" ]; return colors[i]; } Rectangle { id: background width: parent.width + 15 height: parent.height color: altColor(index%2) } Row { id: row Item { width: 5 height: 1 } Text { id: itemText text: model.item font.bold: ListView.isCurrentItem } } } } ListModel { id: itemModel ListElement { item: "item1" } ListElement { item: "item2" } ListElement { item: "item3" } ListElement { item: "item4" } ListElement { item: "item5" } }
}
@ -
@jochen and Yash: I'm talking about Qt Quick ListViews and not traditional QtGui ListViews. They aren't the same.
@bradley: Yes, that's exactly what I also found out later on... I just realized that setting the opacity can be used as a "workaround" but I would prefer that the ListView has alternating background components built-in or that the 'z'-value can be use.
-
The highlight (default z-value 0) and delegate (default z-value 1) are essentially siblings, so manipulating the z property will allow you to place one on top of the other, but not interleave them (which is something we originally wanted to support with the API). Hopefully we'll be able to make some improvements to highlight/delegate interaction in future versions.
Here's a (rather ugly) way you could achieve a highlight between the background and text today:
@
import Qt 4.7Rectangle {
width: 200
height: 200ListView { id: view focus: true anchors.fill: parent model: 10 highlightMoveDuration: 500 highlightMoveSpeed: -1 delegate: Item { id: wrapper width: 200 height: label.height Rectangle { id: backgroundRect y: wrapper.y width: 200 height: label.height color: index % 2 ? "green" : "blue" } Text { id: label; text: index } Component.onCompleted: backgroundRect.parent = view.contentItem } highlight: Rectangle { color: "red" z: .5 } }
}
@ -
@mbasser: What version of Qt are you using? I can't make it work on the beta 1 release. Well, maybe it's time to update to beta 2 anyway.
I'm not sure if there exits a contentItem property on the view (see line 26), I get the following error when running the example (it still shows the listview though):
file://....qml:26: Error: Cannot assign [undefined] to QDeclarativeItem*
I don't think I have the same result as you, my list view alternates between the following background colors: blue, white, green and not only blue and green. The highlight is only visible when the background is white and I think this is because the background is actually transparent (no rectangle is drawn?). This can be due to I'm only using beta 1 instead of 2.
-
[quote author="mario" date="1280820453"]@mbasser: What version of Qt are you using? I can't make it work on the beta 1 release. Well, maybe it's time to update to beta 2 anyway.
[/quote]I'm using HEAD of the qt-qml staging branch. contentItem was introduced in change 9d6ccfea89ae99b747f70ece71185868f189d0f9 (June 24) -- I'm not sure if it is in beta2; if not it will definitely be in the next release candidate.
Regards,
Michael