Alternating background color for ListViews

jochen

If QAbstractItemView::setAlternatingRowColors() is set to true, Qt should do everything for you. Is there a special reason why you can't use that method? (In the Designer you find a CheckBox named "alternatingRowColors").

Yash

You can achieve this by two ways

First already described. i.e use direct available functions
Second use CSS (QSS) .Search doc for more info. If can't let me know.

baysmith

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

}
@

Yash

See how easy Qs you ask everbody know. Please don't take it otherwise.

mario

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

mbrasser

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

}
@

mario

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

mario

[quote author="Yash" date="1280770223"]See how easy Qs you ask everbody know. Please don't take it otherwise.[/quote]

I'm not sure I understand what you mean Yash?

Yash

yea.. My mistake :)

I should read your post bit more.

mario

@Yash: You are not the first that miss out that this is a Quick category question :)

mbrasser

[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