2016-08-27 3 views
0

は、次のQMLのコードを考えてみましょう:QML:予期しないAnchorAnimation行動

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)で発生し、アニメーションが終了するとウィンドウの下部に表示されます。

何が起こっているのですか?

答えて

2

アニメーションを起動するときに、ウィンドウのheight0です:

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

ウィンドウの高さがゼロよりも大きいときには、アニメーションを開始できます。

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

それはそのafterSynchronizing()を表示されますうまく機能し、ハックレスであると感じる:

しかし、それまでにウィンドウの高さを想定するのが安全かどうかはわかりません。

+0

これはまさにそれです!どうもありがとうございました。 –