flex之小功能：用AS3创建带收缩功能的自定义Panel

最新推荐文章于 2026-06-20 12:58:50 发布

原创最新推荐文章于 2026-06-20 12:58:50 发布 · 183 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Flex #Flash

Flex 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了使用ActionScript 3创建自定义Flex组件的方法，并通过一个具体的例子——带有收缩功能的自定义Panel来演示如何实现。该教程展示了如何添加两个按钮用于最大化和还原Panel，并自定义了两个事件以实现交互。

Flex3权威指南第10课中讲述了如何用AS3创建自定义组件，例如创建一个带收缩功能的自定义Panel。如图：

此AS代码就是填加了两个BUTTON，用图标显示了。还自定义了两个事件：restore和maximize。当然，你引用此组件的时候再实现这两个事件。

代码为：

package views
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.Panel;
	import mx.controls.Button;
	
	[Event(name="restore")]
	[Event(name="maximize")]
	
	public class MaxRestorePanel extends Panel
	{
		private var state:int =0;//代表是否被最大化
		private var btStateUp:Button;//可以单击该按钮将Panel最大化
		private var btStateDown:Button;//可以单击该按钮将Panel还原
		
		[Embed("../assets/upArrow.gif")]
		private var buttonUpIcon:Class;
		
		[Embed("../assets/downArrow.gif")]
		private var buttonDownIcon:Class;
		//设置状态，看看派发哪个事件
		private function setState(state:int):void{
			this.state = state;
			if(state == 0){
				this.dispatchEvent(new Event("restore"));
			} else {
				this.dispatchEvent(new Event("maximize"));
			}
		}
		protected override function createChildren():void{//重写Panel中的createChildren
			super.createChildren();
			btStateUp = new Button();
			btStateDown = new Button();
			btStateUp.addEventListener("click",doMaximize);
			btStateDown.addEventListener("click",doRestore);
	                                btStateUp.setStyle("overIcon",buttonUpIcon);
	                                btStateUp.setStyle("downIcon",buttonUpIcon);
	                                btStateUp.setStyle("upIcon",buttonUpIcon);
	                                btStateDown.setStyle("overIcon",buttonDownIcon);
	                                btStateDown.setStyle("downIcon",buttonDownIcon);
	                                btStateDown.setStyle("upIcon",buttonDownIcon);
	                                btStateUp.visible = true;
	                                btStateDown.visible = false;
	                                rawChildren.addChild(btStateUp);
	                                rawChildren.addChild(btStateDown);
		}
		//重写定义小图标的位置和大小
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeigh:Number):void{
			super.updateDisplayList(unscaledWidth,unscaledHeigh);
			if(unscaledWidth > 0){
				this.visible = true;
			} else {
				this.visible = false;
			}
			var upAsset:DisplayObject = btStateUp.getChildByName("upIcon");
			var downAsset:DisplayObject = btStateDown.getChildByName("upIcon");
			var margin:int = 4;//详细请查看权威指南211页
			btStateUp.setActualSize(upAsset.width+margin,upAsset.height+margin);
			btStateDown.setActualSize(downAsset.width+margin,downAsset.height+margin);
			var pixelsFromTop:int = 5;
			var pixelsFromRight:int = 10;
			var buttonWidth:int = btStateUp.width;
			var x:Number = unscaledWidth - buttonWidth - pixelsFromRight;
			var y:Number = pixelsFromTop;
			btStateDown.move(x,y);
			btStateUp.move(x,y);
		}
		private function doMaximize(event:Event):void{
			setState(1);
			btStateUp.visible = false;
			btStateDown.visible = true;
		}
		private function doRestore(event:Event):void{
			setState(0);
			btStateUp.visible = true;
			btStateDown.visible = false;
		}
	}
}