Qt Quick TreeView expand/collapse 上的动画

Question

我已经在 Qt 论坛上问过这个问题（link), but received no response, and a similar question 那里已经 3 个月没有人回答了...所以我来了。

我正在尝试在 QML 中为 TreeView 的展开和折叠设置动画。我在我的应用程序的其他地方有一个 flickable 动画，其中 flickable 中子对象的高度被动画化以模拟 "expanding" 并且我需要 TreeView 的 expand/collapse 相同（或至少相似）。

我尝试在我的 rowDelegate 中的行的高度添加一个动画，但没有效果：

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

查看 Gabriel de Dietrich 和 Caroline Chao 使用 Qt 打包完成的 TreeView 实现 (documentation here)，他们似乎将子数据插入私有“__listView”当父级展开时，当它折叠时移除。

经过一些研究，我找到了关于 view transitions and a few tips from a Whosebug answer regarding animating new items in a table 的信息。

借助这些技巧，我能够在 TreeView 的私有属性中进行修改，以获得非常糟糕的展开动画...

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.")
        }
    }
...

这会在展开（插入）新项目时从树的顶部滑入...但这不是我需要的。我知道使用这些 QML 对象的私有属性是不好的做法，但我会采用任何有效的方法。

另请注意，以上内容实际上对删除无效。

将上面数字动画中的"y"替换为"height"也不行。

用于树的 Qt class 有一个简单的 boolean property 用于动画树的展开和折叠，但是 TreeView 没有这样的属性。

有谁知道完成这个动画的方法吗？

提前感谢您的任何建议！

编辑 我也尝试在 rowDelegate 和 itemDelegate 中添加 ListView.onAdd 和 ListView.onRemove 处理程序，但无济于事...请参见下面的示例：

rowDelegate:     Rectangle {
        id: rowDelegateItem
        height: 100

        SequentialAnimation {
            id: collapseAnimation
            running: false
            PropertyAction { target: rowDelegateItem; property: "ListView.delayRemove"; value: true }
            NumberAnimation { target: rowDelegateItem; properties: "height"; to: 0.0; duration: 250 }
            PropertyAction { target: rowDelegateItem; property: "ListView.delayRemove"; value: false }
        }

        SequentialAnimation {
            id: addAnimation
            running: false
            PropertyAction { target: rowDelegateItem; property: "height"; value: 0 }
            NumberAnimation { target: rowDelegateItem; properties: "height"; to: 100; duration: 250 }
        }

        ListView.onRemove: {
            console.log("onRemove");
            collapseAnimation.start();
        }

        ListView.onAdd: {
            console.log("onAdd");
            addAnimation.start();
        }

但是 "onAdd" 和 "onRemove" 日志输出从未打印过。

Answer 1

我能够改进我的展开动画，但是对 Qt 问题的（几乎）最终答案是，如果不直接编辑 Qt 源代码（甚至可能不会... ？）。对于许多人来说，这不是一个可行的选择，因此不是答案。

在发布新的 Qt Controls 版本并使用全新的 TreeView 实现进行更新之前，此问题将一直存在 https://bugreports.qt.io/browse/QTBUG-56490。
仅供参考：link 声明 "It's way too late for 5.8" 所以我相信可以安全地假设这将在 5.8 之后出现。

我正在讨论对 Qt 源代码进行 Qt 支持的编辑，但作为对上述问题的回答，答案是当前版本的 Qt 无法完成。（目前支持的版本是 5.7）

Qt Quick TreeView expand/collapse 上的动画

Animation on expand/collapse of Qt Quick TreeView

animation

qml

qtquick2

qt-quick

qtquickcontrols