QML：意外的 AnchorAnimation 行为

Question

考虑以下 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 的底部.

怎么回事？

Answer 1

在您开始播放动画时，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：意外的 AnchorAnimation 行为

QML: unexpected AnchorAnimation behavior

qt

qml

qtquick2