qt - qt QML 可折叠嵌套 ListView 与 PropertyAnimation

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

为了更简单的实现，摆脱你的状态和转换，只使用 a Behavioron height。您可以更改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
        }
    }
}