Qt World Summit: Register Today!

[Solved]ListView: Changing Background color of a row from the model

  • Hallo!

    I am new in QML programming (i am using QML2) and I now I am playing with the ListView.

    I like to change the background of a row in my list by giving the model an additional Property.

    Here is my code ( at the moment ):

    @Rectangle {
    id: messageList

    width: 900
    height: 360
    ListModel {
        id: myModel
        ListElement {
            msgId: 1
            timeStamp: "14-Sep-2012 12:01:12"
            basicText: "Test"
            type:      "Alarm"
            // the background color of the Line in the List
            bgColor:     "red"
        ListElement {
            msgId: 2
            timeStamp: "14-Sep-2012 12:10:12"
            basicText: "Test123213213"
            type:      "Warning"
            bgColor:     "red"
        ListElement {
            msgId: 3
            timeStamp: "14-Sep-2012 12:10:12"
            basicText: "Test"
            type:      "Technical"
            bgColor:     "blue"
    Component {
        id: msgRow
        Item {
            id: topLayout
            width: messageList.width
            height: 20
            // generate the background
            Rectangle {
                id: background
                x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                border.color: "orange"
                radius: 5
                color: "lightgrey"
            Row {
                property real offset: 2
                x: topLayout.x+5
                anchors.verticalCenter: parent.verticalCenter
                Text { text: msgId; width: (messageList.width/100*10)}
                Text { text: timeStamp; width: (messageList.width/100*20)}
                Text { text: basicText; width: (messageList.width/100*70)}
    ListView {
        model: myModel
        delegate: msgRow


    Has anybody a hint for me how to do this?

    best regards

  • how about binding bgColor to background's color property ?

  • Yes, now this works now.
    I have tried this before, but before i didn't used bgColor as name of the property i used color, then it's not working - it's clear!
    Thank you!

  • yes,, as you stated, when name is 'color' rather than 'bgColor',,,

    color: color

    will make binding loop, in this case, to avoid this situation,
    you can write down 'model.color', without changing list model.

    color: model.color

Log in to reply