Flex 4過渡：同時移動和調整小故障

Question

我正在構建一個用戶界面，我有兩個面板需要移動和調整大小。他們必須看起來像一個單一的面板。當我移動或調整大小時，它工作正常。但是，當一個移動，另一個同時調整大小時......兩者之間出現間斷線。

我該如何避免這種情況？

這是問題的一個工作示例：提前

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         xmlns:components="components.*" 
         frameRate="30" height="400" width="200" > 
    <s:states> 
    <s:State name="minimized" /> 
    <s:State name="maximized" /> 
    </s:states> 

    <s:transitions> 
    <s:Transition> 
     <s:Parallel duration="4000" targets="{[one, two]}"> 
     <s:Move target="{two}" /> 
     <s:Resize target="{one}" /> 
     </s:Parallel> 
    </s:Transition> 
    </s:transitions> 

    <s:Group id="one" 
      width="200" 
      height.minimized="20" height.maximized="200" 
      y="0"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
     <s:SolidColor color="black" /> 
     </s:fill> 
    </s:Rect> 
    </s:Group> 

    <s:Group id="two" 
      width="200" 
      height="200" 
      y.minimized="20" y.maximized="200"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
     <s:SolidColor color="black" /> 
     </s:fill> 
    </s:Rect> 
    </s:Group> 

    <s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" /> 

</s:WindowedApplication> 

謝謝！

更新：這裏是與VGroup版本：無論是在同一VGroup

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         xmlns:components="components.*" 
         frameRate="30" height="400" width="400" > 
    <s:states> 
    <s:State name="minimized" /> 
    <s:State name="maximized" /> 
    </s:states> 

    <s:transitions> 
    <s:Transition> 
     <s:Parallel duration="4000" targets="{[one, two, three]}"> 
     <s:Move target="{two}" /> 
     <s:Resize target="{one, three}" /> 
     </s:Parallel> 
    </s:Transition> 
    </s:transitions> 

    <s:Group id="one" 
      width="200" 
      height.minimized="20" height.maximized="200" 
      y="0"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
     <s:SolidColor color="black" /> 
     </s:fill> 
    </s:Rect> 
    </s:Group> 
    <s:Group id="two" 
      width="200" 
      height="200" 
      y.minimized="20" y.maximized="200"> 
    <s:Rect width="100%" height="100%"> 
     <s:fill> 
     <s:SolidColor color="black" /> 
     </s:fill> 
    </s:Rect> 
    </s:Group> 


    <s:VGroup gap="0" left="200"> 
    <s:Group id="three" 
      width="200" 
      height.minimized="20" height.maximized="200" 
      y="0"> 
     <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:SolidColor color="black" /> 
     </s:fill> 
     </s:Rect> 
    </s:Group> 
    <s:Group id="four" 
      width="200" 
      height="200"> 
     <s:Rect width="100%" height="100%"> 
     <s:fill> 
      <s:SolidColor color="black" /> 
     </s:fill> 
     </s:Rect> 
    </s:Group> 
    </s:VGroup> 

    <s:Button click="currentState=(currentState=='minimized'? 'maximized' : 'minimized')" label="{currentState}" /> 

</s:WindowedApplication> 

Answer 1

廣場和只改變第一板的高度。