Flex替换DividedBox的Divider图标并实现可关闭隐藏功能

最新推荐文章于 2020-06-17 12:46:35 发布

最新推荐文章于 2020-06-17 12:46:35 发布 · 126 阅读

文章标签：

#Flex #Flash

Flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何为DividedBox组件扩展实现点击展开/隐藏功能。通过自定义DividerBox类并利用dividerSkin属性，实现对DividedBox内元素的动态显示与隐藏。

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

今天扩展实现了DividedBox的“点击展开/隐藏”功能。
DividedBox默认只提供Drag功能，如果要想提供“点击展开/隐藏”功能，那么就需要自己扩展实现了。一般来讲，有两种方式：

（1）一种方式是extends DividedBox实现类，注册DividerPress事件监听，来达到效果。这种方式的弊端是整个“拖拽线”都会被监听。一般不推荐采用这种方式。

（2）一种方式是利用DividedBox上的“dividerSkin”这个style属性来自定义拖拽对象样式，并注册MouseClick事件进行处理。一般这种方式用的比较多。
接下来，就讲讲第二种方式的实现：

首先自定义一个DividerBox类，这个类需要被设置到“dividerSkin”这个style属性上。

package
{   
    import flash.events.MouseEvent;   
    import mx.containers.Box;   
    import mx.containers.DividedBox;   
    import mx.controls.Image;   

    public class DividerBox extends Box   
    {   
        [Embed(source='/assets/images/left.gif')]   
        public static const DividerIcon_left:Class;     

        [Embed(source='/assets/images/right.gif')]   
        public static const DividerIcon_right:Class;     

        private var image:Image = new Image();   
        private var bOpened:Boolean = true;   
        private var dividbox:DividedBox = null;   

        public function DividerBox()   
        {   
            super();   
            this.width = 10;   
            this.height = 72;   
            this.clipContent  = true;   
            image.width = 10;   
            image.height = 72;             
            this.addChild( image );   

            //我这个是在一个HdividedBox中，其默认对dividerbox进行了旋转，所以需要旋转回来。   
              image.rotation = 90;   

            this.addEventListener(MouseEvent.CLICK,onMouseClick);   
        }   

        override protected function createChildren():void{   
            super.createChildren();   
            dividbox = this.parent.parent.parent as DividedBox;   
            image.source = DividerIcon_left;   
        }   

        public function onMouseClick(event:MouseEvent):void{   
            if(bOpened){   
                image.source = DividerIcon_right;   
                dividbox.getChildAt(0).width = 0;   
                bOpened = false;   
            }else{   
                bOpened = true;   
                image.source = DividerIcon_left;   
                dividbox.getChildAt(0).width = 180;   
            }   
        }   

    }   
}

只需要把这个DividerBox进行设到“dividerSkin”这个style属性上即可，It’s easy.
main_DividBox.setStyle("dividerSkin",DividerBox);
现实中的处理比上面的样例类要复杂很多，毕竟有可能“左隐藏”“右隐藏”“下隐藏”，但剩下的只是围绕这个进行丰富和扩展而已。