Alternating background color for ListViews
Is it possible to have alternating background color for Quick ListViews?
Well, I know that I can, from my delegate, check if the index is even or odd and set background color accordingly. But doing this will mess up the highlight since the highlight is drawn behind the delegate.
I’ve also tried using different z-values for the “background” rectangle in the delegate, the text in the delegate and the highlight but w/o success, any clues?
Of course, this is only relevant if you want an animated highlight else there is no problems doing this in the delegate.
11 replies
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.
- import Qt 4.7
- Rectangle {
- 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.7
- Rectangle {
- width: 200
- height: 200
- ListView {
- 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.
@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 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
You must log in to post a reply. Not a member yet? Register here!