Блог

Я создаю пользовательский интерфейс, и у меня есть две панели, которые мне нужно перемещать и изменять размер. Они должны выглядеть как единая панель. Он отлично работает, когда я перемещаю или изменяю размер только одного. Но когда один перемещается, а другой изменяет размеры одновременно … между ними появляется прерывистая линия.

Как я могу этого избежать?

Вот рабочий пример проблемы:

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

Поместите оба в одно и то же место VGroup и измените высоту только первой панели.