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