qt QML collapsible nested ListView with PropertyAnimation

Question

I am new to QT QML, and I am planning to make a ListView with collapse with smooth animation. I saw this https://gist.github.com/elpuri/3753756 code. I tried adding PropertyAnimation during collapse and expand to the code. But failed, how should i make it work?

I was planning to add state and translation, but it is not working for two different components,

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

then for states and transitions,

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

For a simpler implementation, get rid of your states and transitions and just use a Behavior on height. You can change the Loader in the example that you linked to so it looks like this:

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
        }
    }
}