给HDividedBox的dividerPress

最新推荐文章于 2013-10-21 23:10:39 发布

lihua2915

最新推荐文章于 2013-10-21 23:10:39 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： FLEX技术文章标签： application import encoding function layout

本文链接：https://blog.youkuaiyun.com/lihua2915/article/details/5893963

FLEX技术专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一种使用HDividedBox组件实现一侧界面动态隐藏和显示的方法。通过监听dividerPress事件，结合resize效果实现界面的展开与收起。文中详细展示了具体的Flex代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我希望，点击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" layout="absolute" >
<mx:Style>
HDividedBox{
horizontalDividerCursor:Embed(source="assets/allow.png");
}

</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="1000"/>
<mx:Resize id="expand1" target="{childcontain}" widthTo="400"
        duration="1000"/>
<mx:HDividedBox width="100%" height="100%" dividerPress="hiddenLeft(event)" id="container">
<mx:VDividedBox width="400" height="100%" id="childcontain">
<mx:Panel width="100%" height="600" id="pan"/><mx:VBox width="100%" height="100%"/>
</mx:VDividedBox>
<mx:Canvas height="100%" width="100%"/>
</mx:HDividedBox>
</mx:Application>