[Lorne]

I’m using an AppListView to display many items.  There could be dozens or hundreds.  I have the sections for the list view working, but they are always open showing all the items in the list, which is too much at once.  Is there any way to have the sections expandable and collapsible?  I’d only like to show one section open at a time.  Any items that are in other sections, would be hidden.

Thanks for any help

[GüntherFelgo Team]

Hi Lorne!

The default sections offered by the list-view are quick to add, but not really flexible. Collapsing certain sections is not easily possible with the section features of the QML ListView type by Qt. However, you can also manually show sections in your list-view without using the section.property and section.delegate.

The following example provides list item as a model that is already grouped into sections. This then allows to see each section as a single list-item, which is collapsable and holds the child items of each section:

import QtQuick 2.0
import Felgo 3.0

App {

  AppListView {
    anchors.fill: parent

    // model holds item grouped in sections
    model: [
      {
        section: "Section 1",
        items: [{ text: "Item 1.1" }, { text: "Item 1.2" }, { text: "Item 1.3" }]
      },
      {
        section: "Section 2",
        items: [{ text: "Item 2.1" }, { text: "Item 2.2" }, { text: "Item 2.3" }]
      },
      {
        section: "Section 3",
        items: [{ text: "Item 3.1" }, { text: "Item 3.2" }, { text: "Item 3.3" }]
      }]


    // add sections as regular list items
    delegate: Item {
      width: parent.width
      height: contentCol.height

      // each list-entry holds the section header + section items
      Column {
        id: contentCol
        width: parent.width

        // header
        SimpleSection {
          // manually set otherwise induced section title
          property string section: modelData.section

          width: parent.width
          enabled: true // clickable sections
          onSelected: {
            sectionItems.visible = !sectionItems.visible
          }
        }

        // items
        Column {
          id: sectionItems
          width: parent.width

          // show all items of section with repeater
          Repeater {
            model: modelData.items
            delegate: SimpleRow {
              text: modelData.text
            }
          }
        }

      }
    }
  }
}

 

Hope this helps!

[Felgo User]

Thanks for the quick layout of how to do the expanding/collapsing with code.  I can use what you wrote as a basic for the way it needs to look in my app.