定制Flex菜单图标
默认Menu上的Icon必须通过iconField和iconFunction去指定,但是这两种方式都必须用嵌入资源Class名字去指定Icon,如果想用动态的图片(比如URL)作为Menu的Icon,就必须定制一把MenuItemRenderer。
首先写个类CustomMenuItemRenderer继承MenuItemRenderer,里面增加一个如下变量作为自定义Icon的组件:
1 | private var image:UIComponent = new UIComponent(); |
然后里面重写measure方法(计算MenuItem的宽高):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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宽高):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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等的位置):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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的宽度):
1 2 3 4 5 6 7 8 9 | 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换一下
1 2 3 4 5 6 7 | 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文件如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
http://livedocs.adobe.com/flex/3/html/help.html?content=menucontrols_3.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程