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. Are ListView sections stylable?
QtWS25 Last Chance

Are ListView sections stylable?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
listviewsectionstylematerial
2 Posts 2 Posters 510 Views
  • 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
    MrMeszaros
    wrote on 15 Jun 2023, 15:57 last edited by MrMeszaros
    #1

    I would like to create a Listview with sections, however, I would like to apply a Material style elevation to the sections.

    I know I can add it to the separate items like this:

    import QtQuick
    import QtQuick.Controls
    import QtQuick.Controls.Material
    
    ApplicationWindow {
      visible: true
      minimumWidth: 600
      minimumHeight: 500
    
      ListModel {
        id: item_list_model
        ListElement {
          category: "a"
          name: "Apple"
        }
        ListElement {
          sender: "a"
          subject: "Banana"
        }
        ListElement {
          sender: "x"
          subject: "Laptop"
        }
      }
    
      ListView {
        anchors.fill: parent
        model: item_list_model
        delegate: Pane {
          Material.elevation: 4
          Label { text: model.name }
        }
        section.property: 'category'
        section.criteria: ViewSection.FullString
        section.delegate: Label { text: section }
      }
    }
    

    However, I cannot find the option to add style to the section containers (like different background color or Material.elevation).

    I considered:

    • putting a ListView inside a ListView. However, I read it that it is not stable, and might break easily.
    • using delegates for the sections and inside them using a Repeater for the items, but it also breaks some useful functionality - like snapMode, to snap to individual items.

    Is it possible to style sections, or do I need to create my own custom ListView?

    L 1 Reply Last reply 16 Jun 2023, 07:51
    0
    • M MrMeszaros
      15 Jun 2023, 15:57

      I would like to create a Listview with sections, however, I would like to apply a Material style elevation to the sections.

      I know I can add it to the separate items like this:

      import QtQuick
      import QtQuick.Controls
      import QtQuick.Controls.Material
      
      ApplicationWindow {
        visible: true
        minimumWidth: 600
        minimumHeight: 500
      
        ListModel {
          id: item_list_model
          ListElement {
            category: "a"
            name: "Apple"
          }
          ListElement {
            sender: "a"
            subject: "Banana"
          }
          ListElement {
            sender: "x"
            subject: "Laptop"
          }
        }
      
        ListView {
          anchors.fill: parent
          model: item_list_model
          delegate: Pane {
            Material.elevation: 4
            Label { text: model.name }
          }
          section.property: 'category'
          section.criteria: ViewSection.FullString
          section.delegate: Label { text: section }
        }
      }
      

      However, I cannot find the option to add style to the section containers (like different background color or Material.elevation).

      I considered:

      • putting a ListView inside a ListView. However, I read it that it is not stable, and might break easily.
      • using delegates for the sections and inside them using a Repeater for the items, but it also breaks some useful functionality - like snapMode, to snap to individual items.

      Is it possible to style sections, or do I need to create my own custom ListView?

      L Offline
      L Offline
      lemons
      wrote on 16 Jun 2023, 07:51 last edited by lemons
      #2

      @MrMeszaros you can style it anyway you want to. just add wrapper and style it to your liking:

      section.delegate: Rectangle{
      	width: parent.width
      	height: childrenRect.height
      	color: "red"
      	required property string section
      	Text {
      	    anchors.horizontalCenter: parent.horizontalCenter
      	    text: parent.section
      	    font.bold: true
      	    color: "blue"
      	    font.pointSize: 13
      	}
      }
      
      1 Reply Last reply
      0

      2/2

      16 Jun 2023, 07:51

      • Login

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