Highlight property of ListView stretch
-
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: 300ListModel { 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 } } }
}
@ -
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
}
}
}
@