[转]mx:RadioButton定制皮肤，去掉默认Icon-优快云博客

原作者：慧

http://blog.dreamhui.net/archives/38

近日要写一个用于皮肤选择的TitleWindow，因为是单选，所以用到单选框mx:RadioButton，但是想用自定义皮肤来定制mx:RadioButton的默认外观，并想去掉前面作为Icon的小圈圈，找了资料，终于解决了。

mx:RadioButton的样式里面有关于Icon的声明。

因为icon属性只接受Class类型参数，所以如果在CSS样式表中做修改的，不太方便。所以我选择在MXML文件中将其赋予空的Class对象引用，这将覆盖掉默认的前面的小圈圈做icon。然后再在CSS中定义其皮肤。源文件如下：

mxml文件：

^? View Code MXML

代码

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< s:TitleWindow xmlns:fx = " http://ns.adobe.com/mxml/2009 "
    xmlns:s = " library://ns.adobe.com/flex/spark "
    xmlns:mx = " library://ns.adobe.com/flex/mx "
    title = " 选择您喜欢的留言皮肤 "
    close = " skinPanelClose() "
    styleName = " skinSelPanel "
    initialize = " init() " >

     
     < fx:Script >
         <! [CDATA[
            import events.SkinSelEvent;

            import mx.controls.Alert;
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;

            [Bindable]
             private var iconRB:Class = null as Class;
             // 去掉RadioButton前面的icon小圈圈

             private var selArray:Array = new Array();
             // 放置前一项的选择对象(RadioButton)引用

             private var defaultSkin:String = " 6 " ;
             // 用户未做选择时候的默认皮肤

             /* *
             * 窗口初始化，将默认皮肤选项的RadioButton添加滤镜
             * */
             protected function init(): void
            {
                selArray.push(radioBtn6);
                radioBtn6.filters = [glow];
            }

             public static function show():skinSelPanel
            {
                var skinPanel:skinSelPanel = skinSelPanel(PopUpManager.createPopUp(DisplayObject(FlexGlobals.topLevelApplication),skinSelPanel, true ));
                PopUpManager.centerPopUp(skinPanel);
                 return skinPanel;
            }

             /* *
             * 窗口关闭时候，将选择结果以事件形式返给主应用程序
             * */
             protected function skinPanelClose(): void
            {
                PopUpManager.removePopUp( this );
                var skinSelEvent:SkinSelEvent = new SkinSelEvent(SkinSelEvent.SKIN_SHOT);
                 if (skinShotGroup.selection)
                {
                    defaultSkin = skinShotGroup.selectedValue.toString();
                }
                skinSelEvent.skinShot = defaultSkin;

                dispatchEvent(skinSelEvent);
            }

             /* *
             * 用户做选择的时候，将数组selArray中的前一项代表的对象引用的滤镜去掉
             * 并给当前所选项添加滤镜，以便标识
             * */
             protected function skinShotClick( event :ItemClickEvent): void
            {
                 // selArray = new Array();
                 // 如果在此初始化，每次都清空该数组，不能保留上一次点击的结果
                selArray.push(skinShotGroup.selection);
                 if (selArray.length > 1 )
                {
                    var rbtn:RadioButton = selArray[selArray.length - 2 ];
                     // Alert.show(rbtn.name);
                    rbtn.filters = null ;
                }
                skinShotGroup.selection.filters = [glow];
                 // 将用户当前所选项添加滤镜，以便标识
            }

        ]] >
     </ fx:Script >

     
     < fx:Declarations >
         
         < mx:RadioButtonGroup id = " skinShotGroup " itemClick = " skinShotClick(event) " />

         
         < s:GlowFilter id = " glow " blurX = " 40 " blurY = " 40 " color = " 0xffffff " />
     </ fx:Declarations >

     
     < s:HGroup width = " 100% " height = " 100% " id = " rbtnHG " >
         < s:VGroup width = " 30% " height = " 90% " >
             < mx:RadioButton value = " 1 " styleName = " radioBtn1 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 2 " styleName = " radioBtn2 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 3 " styleName = " radioBtn3 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:Button id = " submit " label = " 确定 " styleName = " skinSubmit " click = " skinPanelClose() " />
         </ s:VGroup >
         < s:VGroup width = " 30% " height = " 90% " >
             < mx:RadioButton value = " 4 " styleName = " radioBtn4 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 6 " id = " radioBtn6 " styleName = " radioBtn6 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 5 " styleName = " radioBtn5 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
         </ s:VGroup >
         < s:VGroup width = " 30% " height = " 90% " >
             < mx:RadioButton value = " 7 " styleName = " radioBtn7 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 8 " styleName = " radioBtn8 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
             < mx:RadioButton value = " 9 " styleName = " radioBtn0 " group = " {skinShotGroup} " buttonMode = " true " icon = " {iconRB} " />
         </ s:VGroup >
     </ s:HGroup >

</ s:TitleWindow >

SS文件部分：

^? View Code CSS

代码

.skinSelPanel
{
    backgroundAlpha: 0.7 ;
    backgroundColor:# 000000 ;
    borderVisible: false ;
    corner - radius: 5 ;
    chrome - color:#F579FB;
    content - background - alpha: 0 ;
    color:#ffffff;
    text - align:left;
    font - size: 16 ;
    font - weight:bold;

}
.radioBtn0
{
    up - skin:ClassReference( " skins.messSkinblackBlue " );
    over - skin:ClassReference( " skins.messSkinblackBlue " );
    down - skin:ClassReference( " skins.messSkinblackBlue " );
    selected - disabled - skin:ClassReference( " skins.messSkinblackBlue " );
    selected - down - skin:ClassReference( " skins.messSkinblackBlue " );
    selected - up - skin:ClassReference( " skins.messSkinblackBlue " );
    selected - over - skin:ClassReference( " skins.messSkinblackBlue " );
}
.radioBtn1
{
    up - skin:ClassReference( " skins.messSkinBlue " );
    over - skin:ClassReference( " skins.messSkinBlue " );
    down - skin:ClassReference( " skins.messSkinBlue " );
    selected - disabled - skin:ClassReference( " skins.messSkinBlue " );
    selected - down - skin:ClassReference( " skins.messSkinBlue " );
    selected - up - skin:ClassReference( " skins.messSkinBlue " );
    selected - over - skin:ClassReference( " skins.messSkinBlue " );
}
.radioBtn2
{
    up - skin:ClassReference( " skins.messSkincircleGreen " );
    over - skin:ClassReference( " skins.messSkincircleGreen " );
    down - skin:ClassReference( " skins.messSkincircleGreen " );
    selected - disabled - skin:ClassReference( " skins.messSkincircleGreen " );
    selected - down - skin:ClassReference( " skins.messSkincircleGreen " );
    selected - up - skin:ClassReference( " skins.messSkincircleGreen " );
    selected - over - skin:ClassReference( " skins.messSkincircleGreen " );
}
.radioBtn3
{
    up - skin:ClassReference( " skins.messSkinleftBlue " );
    over - skin:ClassReference( " skins.messSkinleftBlue " );
    down - skin:ClassReference( " skins.messSkinleftBlue " );
    selected - disabled - skin:ClassReference( " skins.messSkinleftBlue " );
    selected - down - skin:ClassReference( " skins.messSkinleftBlue " );
    selected - up - skin:ClassReference( " skins.messSkinleftBlue " );
    selected - over - skin:ClassReference( " skins.messSkinleftBlue " );
}
.radioBtn4
{
    up - skin:ClassReference( " skins.messSkinrectGreen " );
    over - skin:ClassReference( " skins.messSkinrectGreen " );
    down - skin:ClassReference( " skins.messSkinrectGreen " );
    selected - disabled - skin:ClassReference( " skins.messSkinrectGreen " );
    selected - down - skin:ClassReference( " skins.messSkinrectGreen " );
    selected - up - skin:ClassReference( " skins.messSkinrectGreen " );
    selected - over - skin:ClassReference( " skins.messSkinrectGreen " );
}
.radioBtn5
{
    up - skin:ClassReference( " skins.messSkinRed " );
    over - skin:ClassReference( " skins.messSkinRed " );
    down - skin:ClassReference( " skins.messSkinRed " );
    selected - disabled - skin:ClassReference( " skins.messSkinRed " );
    selected - down - skin:ClassReference( " skins.messSkinRed " );
    selected - up - skin:ClassReference( " skins.messSkinRed " );
    selected - over - skin:ClassReference( " skins.messSkinRed " );
}
.radioBtn6
{
    up - skin:ClassReference( " skins.messSkinrightBlue " );
    over - skin:ClassReference( " skins.messSkinrightBlue " );
    down - skin:ClassReference( " skins.messSkinrightBlue " );
    selected - disabled - skin:ClassReference( " skins.messSkinrightBlue " );
    selected - down - skin:ClassReference( " skins.messSkinrightBlue " );
    selected - up - skin:ClassReference( " skins.messSkinrightBlue " );
    selected - over - skin:ClassReference( " skins.messSkinrightBlue " );
}
.radioBtn7
{
    up - skin:ClassReference( " skins.messSkinrightGreen " );
    over - skin:ClassReference( " skins.messSkinrightGreen " );
    down - skin:ClassReference( " skins.messSkinrightGreen " );
    selected - disabled - skin:ClassReference( " skins.messSkinrightGreen " );
    selected - down - skin:ClassReference( " skins.messSkinrightGreen " );
    selected - up - skin:ClassReference( " skins.messSkinrightGreen " );
    selected - over - skin:ClassReference( " skins.messSkinrightGreen " );
}
.radioBtn8
{
    up - skin:ClassReference( " skins.messSkinzise " );
    over - skin:ClassReference( " skins.messSkinzise " );
    down - skin:ClassReference( " skins.messSkinzise " );
    selected - disabled - skin:ClassReference( " skins.messSkinzise " );
    selected - down - skin:ClassReference( " skins.messSkinzise " );
    selected - up - skin:ClassReference( " skins.messSkinzise " );
    selected - over - skin:ClassReference( " skins.messSkinzise " );
}

运行的最终结果：