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



  • 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
 

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