Flex：顯示/隱藏VBoxes使用HDividedBox分割

Question

我有兩個VBoxes通過HDividedBox分割。雙擊HDividedBox可以顯示或隱藏VBox中的一個嗎？
我知道moveDivider()和getDividerAt()方法的使用，但是有沒有用於這類問題的HDividedBox功能。

Answer 1

所以，我推薦使用自定義組件而不是HDividedBox;）。

專門爲你 - 基於事件的部件，其處理在分隔雙擊（200毫秒 - DOUBLECLICK間隔）：

<?xml version="1.0" encoding="utf-8"?> 
<mx:HDividedBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="hdividedbox1_initializeHandler(event)"> 
    <mx:Metadata> 
     [Event(name="dividerDoubleClick", type="mx.containers.DividerDblClickEvent")] 
    </mx:Metadata> 
    <mx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 
      import mx.events.DividerEvent; 
      import mx.events.FlexEvent; 

      private var _timer:Timer = new Timer(200,1);       

      protected function hdividedbox1_initializeHandler(event:FlexEvent):void{ 
       this.addEventListener(DividerEvent.DIVIDER_PRESS, divider_press); 
      }   
      protected function divider_press(event:DividerEvent):void{ 
       if(_timer.running){ 
        event.preventDefault(); 
        event.stopPropagation(); // not sure what of it use 

        dispatchEvent(new DividerDblClickEvent(DividerDblClickEvent.DOUBLE_CLICK, event.dividerIndex)); 
       }else{ 
        _timer.start(); 
       } 
      }   
     ]]> 
    </mx:Script> 
</mx:HDividedBox> 

和定製事件

package mx.containers 
{ 
    import flash.events.Event; 

    public class DividerDblClickEvent extends Event{ 

     // Define static constant. 
     public static const DOUBLE_CLICK:String = "dividerDoubleClick"; 

     public var dividerIndex:int = -1; // not set 

     public function DividerDblClickEvent(type:String, dividerIndex:int = -1, bubbles:Boolean=false, cancelable:Boolean=false){ 
      super(type, bubbles, cancelable);// Call the constructor of the superclass. 

      this.dividerIndex = dividerIndex;// Set the new property. 
     } 

     // Override the inherited clone() method. 
     override public function clone():Event { 
      return new DividerDblClickEvent(type, dividerIndex); 
     } 
    } 
} 

使用的示例：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" xmlns:c="mx.containers.*"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.effects.easing.Cubic; 
     ]]> 
    </mx:Script> 

    <mx:AnimateProperty id="hide" easingFunction="{Cubic.easeIn}" target="{to_hide}" property="width" toValue="0" duration="700" /> 

<c:HDividedBoxD height="100%" width="100%" dividerDoubleClick="hide.play();" > 
    <mx:VBox height="100%" width="50%" backgroundColor="#00FF00"> 
     <mx:Label text=" some text left 1"/> 
     <mx:Label text=" some text left 2"/> 
    </mx:VBox> 
    <mx:VBox id="to_hide" height="100%" width="50%" backgroundColor="#0000FF"> 
     <mx:Label text=" some text right 3"/> 
     <mx:Label text=" some text right 4"/>  
    </mx:VBox>  
</c:HDividedBoxD>  
</mx:Application> 

您可以根據需要修改該模塊。我只想感謝:)