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

這是相當簡單：在窗口創建，頂欄滑入視圖從頂部和底部的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' 

但我不確定是否可以安全地認爲當時窗戶的高度。