QML：ListView项目扩展

Question

我有一个ListView及其延迟。我的意图是制作可扩展的委托（例如，我有三个父委托，如果单击父委托，它将扩展其子项）。我做了这个示范：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true

    id: root
    width: 1406; height: 536

    ListModel {
        id: animalsModel
        ListElement { name: "Cats"; isExpanded: false; type: "parent"}
        ListElement { name: "Puss in Boots 1"; isExpanded: false; type: "Cats"}
        ListElement { name: "Puss in Boots 2"; isExpanded: false; type: "Cats"}
        ListElement { name: "Puss in Boots 3"; isExpanded: false; type: "Cats"}

        ListElement { name: "Dogs"; isExpanded: false; type: "parent"}
        ListElement { name: "Pug 1"; isExpanded: false; type: "Dogs" }

        ListElement { name: "Birds"; isExpanded: false; type: "parent"}
        ListElement { name: "Parrot 1"; isExpanded: false; type: "Birds" }
        ListElement { name: "Parrot 2"; isExpanded: false; type: "Birds" }
        ListElement { name: "Parrot 3"; isExpanded: false; type: "Birds" }
    }

    ListView {
        id: listing

        width: 181
        height: parent.height
        model: animalsModel

        delegate: listdelegate
    }

    Component {
        id: listdelegate

        Rectangle {
            id: menuItem
            width: 181
            height: type === "parent" ? 55 : 0
            color: type === "parent" ? "lightblue" : "white"
            border.width: 1

            states: State {
                name: "expanded"
                when: isExpanded
                PropertyChanges {
                    target: menuItem
                    height: 55
                }
            }

            transitions:[
                Transition {
                    from: ""
                    to: "expanded"
                    reversible: true
                    SequentialAnimation {
                        PropertyAnimation { property: "height"; duration: 1000 }
                    }
                }
            ]

            Text {
                id: text
                text: name
                clip: true
                anchors.fill: parent
            }

            MouseArea {
                function expand(isExpanded) {
                    for(var i = 0; i < animalsModel.count; ++i) {
                        var animal = animalsModel.get(i)

                        if(animal.type === name) {
                            animal.isExpanded = isExpanded
                        }
                    }
                }

                anchors.fill: parent
                onClicked: {
                    if (type == "parent") {
                        if (isExpanded == false) {
                            // expand
                            expand(true)
                        }
                        else {
                            // collapse
                            expand(false)
                        }

                        isExpanded = !isExpanded
                    }
                }
            }
        }
    }
}

除了一个小细节，它完美地工作了：在我的情况下，高度动画非常昂贵（我有更复杂的下陷）。如何使扩展的动画高度独立。我的想法是不调整delagetes的大小，而只将其隐藏在父代的后面。就像火车进入隧道一样。但是在垂直ListView的情况下，我无法操纵延迟的x属性。

有人知道如何实现这一目标吗？在最好的情况下，如何制作我描述的动画？