Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-49868

ListView view transitions don't play well with section headers

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: P4: Low P4: Low
    • None
    • 5.0.0, 5.6
    • None

      The following example can be used to demonstrate several issues:

      import QtQuick 2.0
      
      ListView {
          id: listView
          width: 400
          height: 400
          model: ListModel {
              id: sectionModel
              ListElement { value: "Item 1"; section: "First" }
              ListElement { value: "Item 2"; section: "First" }
              ListElement { value: "Item 3"; section: "First" }
              ListElement { value: "Item 4"; section: "Second" }
              ListElement { value: "Item 5"; section: "Second" }
              ListElement { value: "Item 6"; section: "Second" }
          }
      
          section.property: "section"
          section.criteria: ViewSection.FullString
          section.delegate: Item {
              width: parent.width
              height: 60
              Text {
                  anchors.centerIn: parent
                  font.pixelSize: 24
                  text: section
              }
          }
      
          delegate: Rectangle {
              width: parent.width
              height: 80
              color: "gray"
      
              Text {
                  x: 10
                  anchors.verticalCenter: parent.verticalCenter
                  font.pixelSize: 16
                  text: value
              }
      
              MouseArea {
                  anchors.fill: parent
                  onClicked: sectionModel.remove(index)
              }
          }
      
          remove: Transition {
              NumberAnimation { property: "opacity"; to: 0; duration: 2000 }
          }
      
          removeDisplaced: Transition {
              SequentialAnimation {
                  PauseAnimation { duration: 2000 }
                  NumberAnimation { property: "y"; duration: 2000  }
              }
          }
      }
      
      • Click on "Item 1". Note the odd jump at the beginning of the transition, as well as the odd placement of "Item 2" after the transition completes.
      • After restarting, click on "Item 3". Note how the "Second" section header jumps to its new position rather than nicely transitioning there like the other elements.

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            qt.team.quick.subscriptions Qt Quick and Widgets Team
            mbrasser Michael Brasser
            Votes:
            5 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:

                There are no open Gerrit changes