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'}
}

这很简单：在创建窗口时，topBar从顶部滑入视图，从底部滑入bottomBar。

topBar完全符合预期，但是bottomBar没有：动画发生在顶部（与topBar重叠），并在动画结束时出现在窗口的底部。

发生了什么事？

Answer 1

当您开始动画时，窗口的height为0：

Component.onCompleted: {
    print(window.height)
    window.state='on'
}

当窗口的高度大于零时，您可以启动动画：

onHeightChanged: if (height > 0) window.state = 'on'

似乎afterSynchronizing()也有效，并且感觉不那么苛刻：

onAfterSynchronizing: window.state = 'on'

但是我不确定那时窗口是否有高度是否安全。

QML：意外的AnchorAnimation行为

1 个答案: