定制Flex菜单图标

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/monolog/blog/404802

文章标签：

#python #java

2019独角兽企业重金招聘Python工程师标准>>>

默认Menu上的Icon必须通过iconField和iconFunction去指定，但是这两种方式都必须用嵌入资源Class名字去指定Icon，如果想用动态的图片（比如URL）作为Menu的Icon，就必须定制一把MenuItemRenderer。

首先写个类CustomMenuItemRenderer继承MenuItemRenderer，里面增加一个如下变量作为自定义Icon的组件：

private var image:UIComponent = new UIComponent();

然后里面重写measure方法（计算MenuItem的宽高）：

override protected function measure():void {
	super.measure();

	if (separatorIcon || listData == null) {
		return;
	}

	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);
	if(imageAsset == null){
		return;
	}
	measuredWidth += imageAsset.width;
	if(imageAsset.height > measuredHeight){
		measuredHeight = imageAsset.height;
	}
}

重写commitProperties方法（重画并增加Icon，指定Icon宽高）：

override protected function commitProperties():void {
	super.commitProperties();

	if (separatorIcon || listData == null) {
		return;
	}

	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);
	if(imageAsset == null){
		return;
	}
	image.width = imageAsset.width;
	image.height = imageAsset.height;
	image.graphics.beginBitmapFill(imageAsset.getBitmapData());
	image.graphics.drawRect(0, 0, image.width, image.height);
	image.graphics.endFill();
	if(!this.contains(image)){
		this.addChild(image);
	}
}

重写updateDisplayList方法（指定Icon的位置，由于Icon在左边，所以super一把后，再移动Labe等的位置）：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
	super.updateDisplayList(unscaledWidth, unscaledHeight);

	if (separatorIcon || listData == null) {
		return;
	}

	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);
	if(imageAsset == null){
		return;
	}
	if(typeIcon){
		typeIcon.x += imageAsset.width;
	}
	if(label){
		label.x += imageAsset.width;
	}
}

重写measuredIconWidth方法（计算Icon的宽度）：

override public function get measuredIconWidth():Number {
	var imageAsset:IImageAsset = Utils.getImageAsset(data.@iconName);
	if(imageAsset == null){
		return 0 ;
	}else{
		var horizontalGap:Number = getStyle("horizontalGap");
		return imageAsset.width + horizontalGap;
	}
}

最后用自定义的CustomMenuItemRenderer指定Menu的ItemRenderer，注意使用iconName指定icon的名字（这里为TWaver注册图片的名字）。也可以用别的名字，注意把CustomMenuItemRenderer里面的@iconName换一下

var menu:Menu = Menu.createMenu(network, myMenuData, false);
menu.labelField = "@label";
menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
var point:Point = network.getLogicalPoint(event.mouseEvent);
network.callLater(function():void{
	menu.show(point.x, point.y);
});

指定Menu数据的XML文件如下：

<mx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="www.servasoftware.com" iconName="databox_icon">
				<menuitem label="TWaver" type="check" toggled="true">
					<menuitem label="Java" type="radio" groupName="one"/>
					<menuitem label="Web" type="radio" groupName="one" toggled="true"/>
					<menuitem label="Flex" type="radio" groupName="one" iconName="bus_icon"/>
					<menuitem label="Silverlight" type="radio" groupName="one"/>
				</menuitem>
				<menuitem type="separator"/>
				<menuitem label="2BizBox" iconName="data_icon"/>
			</menuitem>
			<menuitem label="www.2bizbox.com"/>
			<menuitem label="twaver.servasoft.com"/>
		</root>
	</mx:XML>
</code>

需要源代码请留言更多关于MenuItemRenderer的用法参见官方文档：
http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_3.html

转载于:https://my.oschina.net/monolog/blog/404802