Qt QML可折叠嵌套Listed Listed with processanimation

Question

我是 QT QML 的新手，我打算制作一个带有平滑动画的折叠 ListView。我看到了这个https://gist.github.com/elpuri/3753756 代码。我尝试在折叠期间添加 PropertyAnimation 并展开代码。但是失败了，我该如何让它工作？

我正计划添加状态和翻译，但它不适用于两个不同的组件，

nestedModel.setProperty(index, "collapsed", !collapsed)
nestedModel.state = (collapsed.state === "COLLAPSED") ? "COLLAPSED" : "EXPANDED";

那么对于状态和转换，

delegate: Rectangle {
    id: rect_change
    color: "blue"
    //height: 200
    width: 300
    border.color: "black"
    border.width: 2
    state: "COLLAPSED"
    states: [
        State {
            name: "COLLAPSED"
            PropertyChanges { target: rect_change; height: 0; }
        },
        State {
            name: "EXPANDED"
            PropertyChanges { target: rect_change; height: 200; }
        }
    ]
    
    transitions: [
        Transition {
            from: "EXPANDED"
            to: "COLLAPSED"
            PropertyAnimation { property: "height"; duration: 400; }
        },
        Transition {
            from: "COLLAPSED"
            to: "EXPANDED"
            PropertyAnimation { property: "height"; duration: 400; }
        }
    ]
}

Answer 1

为了更简单的实现，摆脱你的状态和转换，只需在height 上使用Behavior。您可以更改链接到的示例中的Loader，使其如下所示：

Loader {
    id: subItemLoader

    sourceComponent: subItemColumnDelegate
    onStatusChanged: if (status == Loader.Ready) item.model = subItems
    clip: true
    height: collapsed ? 0 : subItems.count * 40
    Behavior on height {
        NumberAnimation {
            duration: 400
        }
    }
}