flex button字竖排显示

 

 由于产品功能的要求,需要让按钮Label垂直显示,看了下Button的源代码,Button 的label文本显示主要依赖于内部textField:IUITextField属性,

那么我们就可以想办法获取到textField的引用,对它进行相关操作设置,就可以让按钮Label垂直排列了.

    首先我们需要自定义一个扩展至Button的ButtonExt类,并且定义命名空间:use namespace mx_internal<as3官方的统一命名空间,扩展类如果需要对父类中的一些保护属性进行操作的话,需要使用此命名约定>,这样我们就已经获取到对源Button内部一些属性的操作权限.

    接下来只需要关注,在某个阶段实现某些操作就OK了.

    1:initialize()初始化阶段

    2:updateDisplayList()更新显示列表

    具体请看以下代码:

 

package base.view

{

import flash.filters.GlowFilter;

import flash.text.TextFieldAutoSize;

import mx.controls.Button;

import mx.controls.ButtonLabelPlacement;

import mx.core.mx_internal;

import mx.events.FlexEvent;

/**

* @类名: VButton

* @作者: Angine

* @日期: 2010-1-27

* @版本: V1.0

* @描述:

* 垂直按钮类实现按钮Label文本垂直显示功能

* 功能实现通过获取到Button内部textField引用，

* 并对textField中的设置作出更改。

* 如果你需要调整文字与按钮的位置，需要考虑按钮的 Width,Height,fontSize

* 及paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" 等样式

*/ 

use namespace mx_internal;

public class VButton extends Button

{

   private static const  glowFilter:GlowFilter = new GlowFilter(0x000000,1,2,2,288,1,false);  //黑色滤镜

public function VButton()

{

super();

}

override public function initialize():void

{

super.initialize();

buttonMode=true;

textField.wordWrap=true;

this.labelPlacement=ButtonLabelPlacement.TOP;

textField.autoSize=TextFieldAutoSize.CENTER;

this.setStyle("paddingBottom",0);

this.setStyle("paddingLeft",0);

this.setStyle("paddingRight",0);

this.setStyle("paddingTop",0);

textField.filters = [glowFilter];//文字描黑边

}

override protected function updateDisplayList(unscaledWidth:Number,                 unscaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth,unscaledHeight);

textField.y=(height-textField.height)/2;

textField.x=(width-textField.width)/2;

}

}

}