点击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>
效果: