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: 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
            }
        }
       
                
    }
    

    }
    @



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


Log in to reply
 

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