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.



  • 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").



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



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

    }
    @



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



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



  • [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?



  • yea.. My mistake :)

    I should read your post bit more.



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



  • [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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.