Highlight property of ListView stretch

mysite1920

While practicing some QtQuick example code, there seems a problem in highlight property of @ListView@. When given the width of the parent, it stretch to text when running the code in qmlscene. Here's the code

@import QtQuick 2.2

Rectangle {
id: container
width: 300
height: 300

ListModel {
    id: nameModel
    ListElement { name: "Jayant" }
    ListElement { name: "Ashish" }
    ListElement { name: "Himani" }
    ListElement { name: "Suraj" }
    ListElement { name: "Golu" }
    ListElement { name: "Ashu" }
    
}
Component {
    id: nameDelegate
    Text {
        text: name
        font.family: "Myriad Pro"
        font.pixelSize: 16
    }
    
}

ListView {
    anchors.fill: parent
    clip: true
    width: parent.width
    model: nameModel
    delegate: nameDelegate
    header: bannerComponent  // This is the Component Defined below
    footer: Rectangle { 
        width: parent.width; height: 20 
        color: Qt.rgba(.95, .4, .5, 1)
    }
    highlight: Rectangle {
        width: parent.width   // This is the width of the rectangle, but it stretches to the text.--
        color: "lightgray"
    }
    spacing: 5
   
}

// This is the header component
Component {
    id: bannerComponent
    Rectangle {
        width: parent.width; height: 50
        color: "lightgreen"
        Text {
            anchors.centerIn: parent
            text: "Club Members"
            font.pixelSize: 28
        }
    }
   
            
}

}
@

Jens

The documentation states:
"An instance of the highlight component is created for each list. The geometry of the resulting component instance is managed by the list so as to stay with the current item, unless the highlightFollowsCurrentItem property is false."

The highlight will match the geometry (width/height) of the list delegate. If you want your highlight to fill the width of the view you can simply change the delegate like this:

@
Component {
id: nameDelegate
Item {
width: parent.width
height: textItem.height
Text {
id: textItem
text: name
font.family: "Myriad Pro"
font.pixelSize: 16
}
}
}
@