QML:意外的 AnchorAnimation 行为
QML: unexpected AnchorAnimation behavior
考虑以下 QML 代码:
import QtQuick 2.0
Item{
id:window
anchors.fill:parent
transitions:Transition{AnchorAnimation{duration:500}}
Rectangle{
id:topBar
anchors{left:parent.left;right:parent.right;bottom:parent.top}
height:100
color:'red'
border.width:1
}
Rectangle{
id:bottomBar
anchors{left:parent.left;right:parent.right;top:parent.bottom}
height:100
color:'blue'
border.width:1
}
states:State{
name:'on'
AnchorChanges{target:topBar;anchors.top:parent.top;anchors.bottom:undefined}
AnchorChanges{target:bottomBar;anchors.bottom: parent.bottom;anchors.top:undefined}
}
Component.onCompleted:{window.state='on'}
}
相当简单:在 window 创建时,topBar 从顶部滑入视图,bottomBar 从底部滑入视图。
topBar 完全按照预期的方式工作,但 bottomBar 没有:动画发生在顶部(与 topBar 重叠),并在动画结束时出现在 window 的底部.
怎么回事?
在您开始播放动画时,window 的 height
是 0
:
Component.onCompleted: {
print(window.height)
window.state='on'
}
您可以在 window 的高度大于零时启动动画:
onHeightChanged: if (height > 0) window.state = 'on'
似乎 afterSynchronizing()
也有效,而且感觉没那么黑:
onAfterSynchronizing: window.state = 'on'
但我不确定假设 window 届时有高度是否安全。
考虑以下 QML 代码:
import QtQuick 2.0
Item{
id:window
anchors.fill:parent
transitions:Transition{AnchorAnimation{duration:500}}
Rectangle{
id:topBar
anchors{left:parent.left;right:parent.right;bottom:parent.top}
height:100
color:'red'
border.width:1
}
Rectangle{
id:bottomBar
anchors{left:parent.left;right:parent.right;top:parent.bottom}
height:100
color:'blue'
border.width:1
}
states:State{
name:'on'
AnchorChanges{target:topBar;anchors.top:parent.top;anchors.bottom:undefined}
AnchorChanges{target:bottomBar;anchors.bottom: parent.bottom;anchors.top:undefined}
}
Component.onCompleted:{window.state='on'}
}
相当简单:在 window 创建时,topBar 从顶部滑入视图,bottomBar 从底部滑入视图。
topBar 完全按照预期的方式工作,但 bottomBar 没有:动画发生在顶部(与 topBar 重叠),并在动画结束时出现在 window 的底部.
怎么回事?
在您开始播放动画时,window 的 height
是 0
:
Component.onCompleted: {
print(window.height)
window.state='on'
}
您可以在 window 的高度大于零时启动动画:
onHeightChanged: if (height > 0) window.state = 'on'
似乎 afterSynchronizing()
也有效,而且感觉没那么黑:
onAfterSynchronizing: window.state = 'on'
但我不确定假设 window 届时有高度是否安全。