Forums

OverviewFelgo 2 Support (Qt 5) › AppListView with collapsible sections headers

Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #17879

    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

    #17883

    Günther
    Felgo 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!

    #17890

    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.

     

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support