QML: ListView items expansion - qt

Question

I have a ListView and its delagates. My intention is to make expandable delegates (eg. I have three parent delegates, if the parent delegate is clicked, it will expand its children). I made this demonstration:
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
}
}
}
}
}
}
It works perfectly except one small detail: the height animation is very expensive in my case (I have more complex delagate). How can I make the expanding animation height independent. My idea is to not resize the delagetes, only hide them behind the parent. Like a train going into the tunnel. But I cannot manipulate the x property of delagates in case of vertical ListView.
Any idea how to achive this? In the best scenario how to make the animation I described?