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?
Forum Updated to NodeBB v4.3 + New Features

Are ListView sections stylable?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
listviewsectionstylematerial
2 Posts 2 Posters 528 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

      1/2

      15 Jun 2023, 15:57

      • 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