Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved Use Section Delegate as Footer of Each Section Instead of Header in QML ListView

    QML and Qt Quick
    3
    4
    652
    Loading More Posts
    • 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.
    • C
      Clover last edited by

      The example on this page uses section delegate as header: http://doc.qt.io/qt-5/qml-qtquick-listview.html#section.property-prop

      Are there any methods to use section delegate as footer of each section instead? Can't find it in the document.

      Diracsbracket 1 Reply Last reply Reply Quote 0
      • Diracsbracket
        Diracsbracket @Clover last edited by

        @Clover
        No, there aren't any methods for that.

        1 Reply Last reply Reply Quote 0
        • GrecKo
          GrecKo Qt Champions 2018 last edited by

          You could hack it like so :

          ListView {
              anchors.fill: parent
              model: ListModel {
                  ListElement { name: "Arthur" }
                  ListElement { name: "Arlette" }
                  ListElement { name: "Bonnie" }
                  ListElement { name: "Bernadette" }
                  ListElement { name: "Clothilde" }
                  ListElement { name: "Charles" }
                  ListElement { name: "Clyde" }
                  ListElement { name: "Dodo" }
              }
              section {
                  property: "name"
                  criteria: ViewSection.FirstCharacter
              }
              delegate: Column {
                  width: parent.width
                  id: column
                  ItemDelegate {
                      width: parent.width
                      text: model.name
                  }
                  Label {
                      visible: column.ListView.section !== column.ListView.nextSection
                      text: column.ListView.section
                  }
              }
          }
          

          Embed the section in each delegate and display it when the section differs from the next one.

          C 1 Reply Last reply Reply Quote 1
          • C
            Clover @GrecKo last edited by

            @GrecKo Thank you! I am using a similar hack now.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post