Flex3:无边框透明背景MenuBar实现

发布时间：2020-12-15 05:08:34 所属栏目：百科来源：网络整理

导读：在Flex3中，大家是否发现MenuBar的背景与边框是不能去掉的，其实这是因为MenuBar的缺省的backgroundSkin属性使用的是mx.skins.halo.MenuBarBackgroundSkin，不管您怎么设置，该skin都会绘制背景以及边框，所以我们不能去掉MenuBar的边框。既然这样的话，要

在Flex3中，大家是否发现MenuBar的背景与边框是不能去掉的，其实这是因为MenuBar的缺省的backgroundSkin属性使用的是mx.skins.halo.MenuBarBackgroundSkin，不管您怎么设置，该skin都会绘制背景以及边框，所以我们不能去掉MenuBar的边框。

既然这样的话，要去掉边框，只需要不使用该Skin就可以，所以我们自定义了一个Skin：MenuBarNoBorderFillSkin,该Skin什么都不做，只是用来替代MenuBarBackgroundSkin而已。

MenuBarNoBorderFillSkin.as:

  
  
   
   package com.eshangrao.skin{ ?? import mx.skins.ProgrammaticSkin; ?? import flash.display.Graphics; ?? public class MenuBarNoBorderFillSkin extends ProgrammaticSkin{ ???? public function MenuBarNoBorderFillSkin(){ ?????? super(); ???? } ?? } } 
  
  
另外，使用了MenuBarNoBorderFillSkin以后，MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了，所以我们又做了个MenuBarActiveSkin类来响应鼠标，然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin，这样菜单栏就可以显示不同的状态。

MenuBarActiveSkin.as:

package com.eshangrao.skin{
?? import mx.skins.ProgrammaticSkin;
?? import flash.display.Graphics;
?? import mx.utils.ColorUtil;
?? public class MenuBarActiveSkin extends ProgrammaticSkin{
???? public function MenuBarActiveSkin(){
?????? super();
???? }
???? override protected function updateDisplayList(w:Number,h:Number):void{
?????? var backgroundAlpha:Number = getStyle("backgroundAlpha");
?????? var rollOverColor:uint=getStyle("rollOverColor");
?????? graphics.clear();
?????? drawRoundRect(0,w,h,5,rollOverColor,backgroundAlpha);
???? }
?? }
}

测试代码如下：

<mx:MenuBarlabelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"/>

查看示例| 查看完整源代码

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!