在 AccordionHead 添加你想要的东西

于 2009-03-13 18:11:34 发布 · 143 阅读

文章标签：

#Flash

Flex 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在Flex中自定义Accordion组件头部的方法，通过创建FreeAccordionHead类来扩展AccordionHeader的功能，实现更灵活的布局与交互。同时展示了如何在Accordion头部内添加自定义组件如按钮等。

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

Accordion可以指定它的headerRenderer，但是都是继承 AccordionHeader，而AccordionHeader继承 Button，在Button里面的可以设置的东西很少的。往里面加东西是是肯定可以加的，关键是怎么加合理,方便。

下面这个是我做好的，一个test.swf

package {
    import flash.display.DisplayObject;
    import flash.display.InteractiveObject;
    import flash.events.Event;
    import flash.events.EventPhase;
    import flash.events.MouseEvent;
    
    import mx.containers.accordionClasses.AccordionHeader;
    import mx.core.Container;
    import mx.core.IUIComponent;
    
    public class FreeAccordionHead extends AccordionHeader {
        
        public function FreeAccordionHead() {
            super();
            
            mouseChildren = true;
            addEventListener(Event.ADDED,addChildHandler);
            
        }
        
        private function addChildHandler(e:Event):void {
            if(e.eventPhase == EventPhase.BUBBLING_PHASE) {
                var target:InteractiveObject = e.target as InteractiveObject;
                if(target && target != attachment) {
                    target.mouseEnabled = false;
                }
            }
        }
        
        override protected function mouseDownHandler(event:MouseEvent):void {
            if(event.target == attachment) {
                event.stopImmediatePropagation();
            }
            else {
                super.mouseDownHandler(event);
            }
        }
        
        override protected function mouseUpHandler(event:MouseEvent):void {
            if(event.target == attachment) {
                event.stopImmediatePropagation();
            }
            else {
                super.mouseDownHandler(event);
            }
        }
        
        override protected function clickHandler(event:MouseEvent):void {
            if(event.target == attachment) {
                event.stopImmediatePropagation();
            }
            else {
                super.mouseDownHandler(event);
            }
        }
        
        override public function set labelPlacement(value:String):void {
        }
        
        override public function set data(value:Object):void {
    		super.data = value;
    		
    		createAttachment(getAttachment(value as Container));
    	}
    	
    	private var attachment:IUIComponent;
    	private function createAttachment(content:IUIComponent):void {
    	    if(content) {
    	        if(attachment) {
    	            removeChild(attachment as DisplayObject);
    	            attachment = null;
    	        }
    	        
    	        attachment = content;
    	        addChild(attachment as DisplayObject);
    	        
    	        invalidateDisplayList();
    	    }
    	}
    	
    	private function getAttachment(value:Container):IUIComponent {
    	    var attachment:IUIComponent;
    	    if(value.hasOwnProperty("getAttachment")) {
    	        var fc:Function = value["getAttachment"];
    	        attachment = fc();
    	    }
    	    return attachment;
    	}
    	
    	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    	    super.updateDisplayList(unscaledWidth,unscaledHeight);
    	    
    	    if(attachment) {
    	        var paddingRight:Number = getStyle("paddingRight") || 0;
    	        
    	        var btW:Number = attachment.getExplicitOrMeasuredWidth();
    	        var byH:Number = attachment.getExplicitOrMeasuredHeight();
    	        
    	        var btX:Number = unscaledWidth - btW - paddingRight;
    	        var btY:Number = (unscaledHeight - byH)/2;
    	        
    	        attachment.setActualSize(btW,byH);
    	        attachment.move(btX,btY);
    	        
    	        setChildIndex(attachment as DisplayObject,numChildren-1);
    	    }
    	}
    }
}

package {
    import mx.containers.Canvas;
    import mx.controls.Button;
    import mx.core.IFlexDisplayObject;
    
    public class FreedAccordStyle1 extends Canvas {
        
        public function FreedAccordStyle1() {
        }
        
        public function getAttachment():IFlexDisplayObject {
            var bt:Button = new Button();
            bt.styleName="Button5"
            bt.label = "导入图片";
            return bt;
        }
    }
}

package {
    import flash.events.MouseEvent;
    
    import mx.containers.Canvas;
    import mx.controls.LinkButton;
    import mx.core.IFlexDisplayObject;
    
    public class FreedAccordStyle2 extends Canvas {
        
        public function FreedAccordStyle2() {
        }
        
        public function getAttachment():IFlexDisplayObject {
            var bt:LinkButton = new LinkButton();
            bt.styleName="Button5"
            bt.label = "设计说明";
            bt.setStyle("textDecoration","underline");
            bt.setStyle("paddingRight",0);
            bt.selected = true;
            
            addEventListener(MouseEvent.CLICK,mouseClickHandler,false,0,true);
            return bt;
        }
        
        private function mouseClickHandler(e:MouseEvent):void {
            
        }
    }
}

    <mx:Accordion id="accordion"  width="334"
                height="368"
                headerHeight="60"
                headerRenderer="FreeAccordionHead"
                creationComplete="init()" x="10" y="187">
            <ns1:FreedAccordStyle1 id="redVbox"
                    label="Red"
                    icon="@Embed(source='Icon.png')" />
            <ns1:FreedAccordStyle2 id="orangeVbox"
                    label="Orange"
                    icon="@Embed(source='Icon.png')" />
        </mx:Accordion>

好的这样就做好咯。