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

广场和只改变第一板的高度。