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. QML listview how to set space between header and first item
Forum Updated to NodeBB v4.3 + New Features

QML listview how to set space between header and first item

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 2 Posters 1.0k 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.
  • A Offline
    A Offline
    astoffregen
    wrote on 27 Jan 2023, 14:17 last edited by
    #1

    I use the header property in the listview element.
    How can I get a space between the header and the first list entry?
    The space between the list entries works, but not the space between the header and the first line.

    This is my listview code

    ListView { Layout.fillWidth: true;  Layout.fillHeight: true
        model: user.model
        currentIndex: 1
        onCurrentIndexChanged: { console.log("currentIndex changed") }
        header: UserItemDelegate { p_index: -1; p_name: "Benutzeranmeldung"; p_icon: "password"; p_isHeader: true }
        delegate: UserItemDelegate { p_index: index; p_name: name; p_icon: icon; p_isHeader: false }
        spacing: 20
    }
    

    UserItemDelegate looks like this but that may not be important to my question

    Item {
        id: root
        height: configuration.getSize(Sizes.ListItemHeight)
        width: parent.width
        property int p_index
        property string p_name
        property string p_icon
        property bool p_isHeader
        property bool p_isSelected: root.ListView.view.currentIndex == p_index
        property string p_color: configuration.getColor(p_isHeader ? Colors.ListItemDisabled : (p_isSelected ? Colors.ListItemSelected : Colors.ListItemDefault)) 
        
        Rectangle { anchors.fill: parent; Layout.fillWidth: true; Layout.fillHeight: true; color: p_color
            RowLayout { anchors.verticalCenter: parent.verticalCenter; 
                Image { Layout.leftMargin: 10; sourceSize.height: root.height * 0.6; source: "image://iconprovider/" + p_icon }
                Label { Layout.leftMargin: 10; text: p_name }
            }
            MouseArea{ enabled: !p_isHeader; anchors.fill: parent; onClicked: { root.ListView.view.currentIndex = p_index; } } 
        }
    }
    
    1 Reply Last reply
    0
    • J Offline
      J Offline
      johngod
      wrote on 27 Jan 2023, 21:22 last edited by
      #2

      Use a different delegate for the header with the height of the UserItemDelegate + the space. You dont need to duplicate the code for the two delegates, just create a Item for the header delegate with the user delegate inside.

      1 Reply Last reply
      1

      1/2

      27 Jan 2023, 14:17

      • Login

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