Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Animating expand and collapse of QML TreeView
Forum Updated to NodeBB v4.3 + New Features

Animating expand and collapse of QML TreeView

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 1 Posters 2.6k Views 1 Watching
  • 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.
  • N Offline
    N Offline
    NotJo4Ever
    wrote on last edited by NotJo4Ever
    #1

    Has anyone ever successfully discovered how to animate the expand and collapse of a TreeView in QML? The only information I can find on this is referenced in an old post which has no replies. (See below)

    Re: Animation When expanding and collapsing QML TreeView

    I'm currently using 5.5.1.

    1 Reply Last reply
    0
    • N Offline
      N Offline
      NotJo4Ever
      wrote on last edited by
      #2

      I have tried everything that I can think of.

      From the extreme basics... (Which does not work. )

              Behavior on height {
                  NumberAnimation {
                      duration: 250
                      easing.type: Easing.InOutQuad
                  }
      

      To some more complex and "hacky" solutions... (See below)

      Looking at the TreeView implementation done by Gabriel de Dietrich and Caroline Chao (here), it seems that they perform an insert of the child data into the private "__listView" when the parent is expanded.

      After some research I was able to find information on view transitions and a few tips from a stackoverflow answer regarding animating new items in a table.

      Armed with these tips I was able to get a pretty crappy expand animation...

      TreeView {
          id: tree
          model: myModel
          Transition {
              id: treeTransitionAnimation
              NumberAnimation { properties: "y"; duration: 300 }
          }
      
          Component.onCompleted: {
              if(this.__listView) {
                  this.__listView.add  = treeTransitionAnimation
                  this.__listView.remove  = treeTransitionAnimation
                  //doesn't actually work on remove. The child items in the tree just disappear...
              }
              else {
                  console.log("Something bad happened. Darn.")
              }
          }
      ...
      

      This slides the new items in from the top of the tree when they are expanded (inserted)... but is not what I need. I have an animation in a flickable elsewhere in my applicaiton where the height of a child object in the flickable is animated to emulate "expanding".
      I need to match this style of animation.
      Substituting height into my transition animation simply causes it to fail.

      Any advice would be greatly appreciated!

      1 Reply Last reply
      0
      • N Offline
        N Offline
        NotJo4Ever
        wrote on last edited by
        #3

        http://stackoverflow.com/questions/40000362/animation-on-expand-collapse-of-qt-quick-treeview

        I was able to improve my expand animation, however the (almost) final answer to the question from Qt is that a collapse animation is not possible without editing the Qt source code directly (and maybe not even then...?). For many this is not a viable option and therefore not an answer.

        This problem will exist until after the new Qt Controls version is released and updated with a brand new implementation of TreeView https://bugreports.qt.io/browse/QTBUG-56490.
        FYI: That link states "It's way too late for 5.8" so I believe it's safe to assume this will come after 5.8.

        I am in the process of discussing edits to the Qt source code with Qt support, but as an answer to the question as stated above, the answer is it cannot be done in current versions of Qt. (the current supported release at the time of this answer is 5.7)

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved