FLEX动态弹入弹出 HDividedBox的dividerPress

点击HDividedBox的divider时，HDividedBox的一侧隐藏，而当我再次点击divider时显示。

了解到HDividedBox针对divider有：dividerDrag、dividerPress、dividerRelease三个事件。

分别是拖拽、按下、释放。

我选择在按下的时候触发一个事件。然后，在隐藏时，给了一个resize的效果

源码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:esri="http://www.esri.com/2008/ags"
    paddingLeft="0"
    paddingRight="0"
    paddingTop="0"
    paddingBottom="0"
    layout="absolute" >
 <mx:Style>
  
  
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   import mx.events.DividerEvent;
   
   
   private function hiddenLeft(event:DividerEvent):void{
    var child:UIComponent = event.target.getChildAt(0);
    if(child.width == 0){
     expand1.play();
    }else{
     expand.play();
    }
   }
   
  ]]>
 </mx:Script>
 <mx:Resize id="expand" target="{childcontain}" widthTo="0"
      duration="1500"/>
 <mx:Resize id="expand1" target="{childcontain}" widthTo="100"
      duration="1500"/>        
 <mx:HDividedBox width="100%" height="100%" dividerPress="hiddenLeft(event)" id="container">
  <mx:VDividedBox width="100" height="100%" id="childcontain">
   <mx:Panel width="100%" height="100%" id="pan"/>
  </mx:VDividedBox>
  <mx:Canvas height="100%" width="100%"/>
 </mx:HDividedBox>
</mx:Application>

 

效果：