Change height of column for animation - animation

Question

I have created a simple tree which I wish to animate by having branches height expand/collapse visually. My code below works by switching only the visible attribute, so that if I click on the branch it can appear/disappear.
However I want to animate the height of the column from normal to 0 and back. The problem is, the height of the column never changes when the state changes. Why?
import QtQuick 2.0
import QtQuick.Layouts 1.12
Column {
id: menuGroup
property string path: "/"
property bool _onCurrentPath: (treeMenu._currentPath.indexOf(path) === 0)
anchors.left: parent.left
anchors.right: parent.right
spacing: 0
// visible: _onCurrentPath <-- this works
states: [
State {
name: "HIDDEN"
when: !_onCurrentPath
PropertyChanges { target: menuGroup; height: 0}
},
State {
name: "VISIBLE"
when: _onCurrentPath
PropertyChanges { target: menuGroup; height: 600 } //menuGroup.implicitHeight}
}
]
transitions: Transition {
PropertyAnimation { property: "height"; duration: 500; easing.type: Easing.InOutQuad }
}
onStateChanged: {
console.log("Group "+path+" state "+state)
}
}
Is it not possible to force the height of a column? (Do I have to wrap it in a Rectangle or some other solution)?

Answer 1

The first thing I noticed when running your code was that onStateChanged was not executing. It seems that your when: _onCurrentPath is not evaluating due to a scoping problem that does not trigger an error or warning. I changed this to when: menuGroup._onCurrentPath in both cases and I was able to start seeing the state changes.
Secondarily, I had to enable clip: true to make sure that the contents of the column were actually trimmed, otherwise it visually didn't make a difference that the column was collapsing, as the contents stayed visible.
Here is a full working example (modified your _onCurrentPath bool to simplify testing):
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
Window {
width: 640
height: 480
visible: true
Column {
id: menuGroup
property string path: "/"
property bool _onCurrentPath: button.checked
anchors.left: parent.left
anchors.right: parent.right
spacing: 0
clip: true // Must enable to actually clip contents of column when collapsing
states: [
State {
name: "HIDDEN"
when: !menuGroup._onCurrentPath // Must explicitly state menuGroup here
PropertyChanges { target: menuGroup; height: 0}
},
State {
name: "VISIBLE"
when: menuGroup._onCurrentPath
PropertyChanges { target: menuGroup; height: 600 }
}
]
transitions: Transition {
PropertyAnimation { property: "height"; duration: 500; easing.type: Easing.InOutQuad }
}
onStateChanged: {
console.log("Group "+path+" state "+state)
}
Rectangle { // Some column content for demonstration
color: "red"
implicitHeight: 600
implicitWidth: 200
}
}
Button {
id: button
anchors.bottom: parent.bottom
checkable: true
text: "Change States"
}
}