Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Highlight property of ListView stretch
Forum Updated to NodeBB v4.3 + New Features

Highlight property of ListView stretch

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 2 Posters 932 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    mysite1920
    wrote on last edited by
    #1

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

    }
    @

    1 Reply Last reply
    0
    • J Offline
      J Offline
      Jens
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved