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

ListView view transitions don't play well with section headers

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • P4: Low
    • None
    • 5.0.0, 5.6
    • 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

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              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