Flex无边框MenuBar的实现方法

在Flex中添加MenuBar后，会发现所添加的MenuBar带了一个边框，有时这边框为了适应背景而必须去除，那怎么去除这边框呢？从Flex中我们会发现无论怎么设置MenuBar的样式都无法去除该边框，这是因为其backgroundSkin使用了系统缺省的皮肤，所以我们无论怎么设置都无法生效，原因找着了，我们可以通过给MenuBar设置backgroundSkin来改变其边框样式。

首先，我们先写个皮肤类

package Skin

{

import mx.skins.ProgrammaticSkin;

import flash.display.Graphics;

import mx.utils.ColorUtil;

import flash.geom.Matrix;

import flash.display.GradientType;

public class NoBorderMenuBarSkin extends ProgrammaticSkin

{

public function NoBorderMenuBarSkin()

{

super();

}

override protected function updateDisplayList(w:Number, h:Number):void

{

//自绘背景

graphics.clear();

var matrix:Matrix = new Matrix( );

matrix.createGradientBox(w, h, Math.PI/2, 0, 0);

var colors:Array = [0xFFFFFF, 0xD9D9D9];

var alphas:Array = [100, 100];

var ratios:Array = [0x00, 0xFF];

graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);

graphics.drawRoundRect(0,0,w,h,4);

graphics.endFill( );

}

}

}

在应用类中，我们就可以这样使用了

<mx:MenuBar backgroundSkin=”Skin.NoBorderMenuBarSkin”/>