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

ListView view transitions don't play well with section headers

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: P4: Low
    • Resolution: Unresolved
    • Affects Version/s: 5.0.0, 5.6
    • Fix Version/s: None
    • Labels:
      None

      Description

      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.

        Attachments

          Issue Links

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

            Activity

              People

              • Assignee:
                qt.team.quick.subscriptions Qt Quick and Widgets Team
                Reporter:
                mbrasser Michael Brasser
              • Votes:
                4 Vote for this issue
                Watchers:
                12 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Gerrit Reviews

                  There are no open Gerrit changes