Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

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.