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的版本：

<?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

将两者放在同一个VGroup中，并仅更改第一个面板的高度。

Flex 4过渡：同时移动和调整大小的小故障

1 个答案: