[英]qt QML collapsible nested ListView with PropertyAnimation
I am new to QT QML, and I am planning to make a ListView with collapse with smooth animation.我是 QT QML 的新手,我打算用平滑的 animation 制作一个折叠的 ListView。 I saw this https://gist.github.com/elpuri/3753756 code.
我看到了这个https://gist.github.com/elpuri/3753756代码。 I tried adding PropertyAnimation during collapse and expand to the code.
我尝试在折叠期间添加 PropertyAnimation 并展开代码。 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,我计划添加 state 和翻译,但它不适用于两个不同的组件,
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; }
}
]
}
For a simpler implementation, get rid of your states and transitions and just use a Behavior
on height
.为了更简单的实现,摆脱你的状态和转换,只在
height
上使用Behavior
。 You can change the Loader
in the example that you linked to so it looks like this:您可以在链接到的示例中更改
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
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.