Я задал этот вопрос на форумах Qt (ссылка), но не получил ответа и похожий вопрос оставался без ответа в течение 3 месяцев... и вот я здесь.
Я пытаюсь анимировать расширение и свертывание TreeView в QML. У меня есть анимация в flickable в другом месте моего приложения, где высота дочернего объекта в flickable анимируется для имитации «расширения», и мне нужно, чтобы расширение/свертывание TreeView было одинаковым (или, по крайней мере, похожим).
Я попытался добавить анимацию по высоте моей строки внутри моего rowDelegate, которая не имела никакого эффекта:
Behavior on height {
NumberAnimation {
duration: 250
easing.type: Easing.InOutQuad
}
Глядя на реализацию TreeView, сделанную Габриэлем де Дитрихом и Кэролайн Чао, упакованную с Qt (документация здесь), кажется, что они выполняют вставку дочерних данных в закрытый "__listView", когда родитель раскрывается, и удаляют, когда он свернут.
После некоторых исследований мне удалось найти информацию о переходах просмотра. и несколько советов из ответа stackoverflow относительно анимации новых элементов в таблице.
Вооружившись этими советами, я смог взломать частные свойства TreeView, чтобы получить довольно дрянную анимацию расширения...
TreeView {
id: tree
model: myModel
Transition {
id: treeTransitionAnimation
NumberAnimation { properties: "y"; duration: 300 }
}
Component.onCompleted: {
if(this.__listView) {
this.__listView.add = treeTransitionAnimation
this.__listView.remove = treeTransitionAnimation
//doesn't actually work on remove. The child items in the tree just disappear.
}
else {
console.log("Something bad happened. Darn.")
}
}
...
Это перемещает новые элементы из верхней части дерева, когда они расширяются (вставляются)... но это не то, что мне нужно. Я знаю, что использовать приватные свойства этих объектов QML — плохая практика, но я приму все, что работает.
Также обратите внимание, что вышеприведенное на самом деле даже не работает при удалении.
Замена «y» на «height» в числовой анимации выше также не работает.
Класс Qt, используемый для деревьев, имеет простое логическое свойство для анимация расширения и свертывания дерева, но у TreeView нет такого свойства.
Кто-нибудь знает, как сделать эту анимацию?
Спасибо заранее за любые советы!
EDIT Я также пытался добавить обработчики ListView.onAdd и ListView.onRemove в rowDelegate и itemDelegate, но безрезультатно... см. пример ниже:
rowDelegate: Rectangle {
id: rowDelegateItem
height: 100
SequentialAnimation {
id: collapseAnimation
running: false
PropertyAction { target: rowDelegateItem; property: "ListView.delayRemove"; value: true }
NumberAnimation { target: rowDelegateItem; properties: "height"; to: 0.0; duration: 250 }
PropertyAction { target: rowDelegateItem; property: "ListView.delayRemove"; value: false }
}
SequentialAnimation {
id: addAnimation
running: false
PropertyAction { target: rowDelegateItem; property: "height"; value: 0 }
NumberAnimation { target: rowDelegateItem; properties: "height"; to: 100; duration: 250 }
}
ListView.onRemove: {
console.log("onRemove");
collapseAnimation.start();
}
ListView.onAdd: {
console.log("onAdd");
addAnimation.start();
}
Но выходные данные журнала "onAdd" и "onRemove" даже не распечатываются.