Flex 学习笔记------自定义按钮状态切换样式

自定义按钮状态切换样式

Flex 中按钮的状态主要分为四种，up、down、over、disabled。在Flex 3.x的版本中，可以给 Button 组件绑定四种不同的icon：upIcon、downIcon、overIcon、disabledIcon。

.button{
   upIcon: Embed(source='imgurl'),      
   downIcon: Embed(source='imgurl'),    
   overIcon: Embed(source='imgurl'),    
   disabledIcon: Embed(source='imgurl')    
}

但是在Flex4（SDK 4.6）中却找不到这四个style属性了。于是乎，另寻它途吧。

方法一：事件法

既然没有直接的状态属性，那就在具体的事件响应中设置了。还好Button的 icon 属性还在，

package utilX {
import spark.components.Button;

// 这里设置 IconButton 的 Style
[Style(name="iconSkinDisabled")]
[Style(name="iconSkinDown")]
[Style(name="iconSkinOver")]
[Style(name="iconSkinUp")]public class IconButton extends Button{
　　// 构造函数
    public function IconButton(){
        super();

        addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
            e.target.setStyle("icon", e.target.getStyle('iconSkinDown'));
        });
        addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void{
            e.target.setStyle("icon", e.target.getStyle('iconSkinUp'));
        });
        addEventListener(MouseEvent.MOUSE_OVER, function(e:MouseEvent):void{
            e.target.setStyle("icon", e.target.getStyle('iconSkinOver'));
        });
    }
}
}

方法二： skin 类

Flex4 中增加了一个 skin 类，用来控制一些样式的显示。首先需要定义一个 SparkShin 类:

<?xml version="1.0"?>
<s:SparkSkin
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        currentStateChanging="onCurrentStateChanging(event)"
        >
　　// 定义宿主 
　　// IconButton中可以增加一些额外的样式属性

    <fx:Metadata>
        [HostComponent("utilX.IconButton")]
    </fx:Metadata>

    <fx:Script><![CDATA[

        import mx.events.StateChangeEvent;
        import mx.managers.CursorManager;

        private function onCurrentStateChanging(event:StateChangeEvent):void {
            switch (event.newState) {
                case "up":
                    setIcon("iconSkinUp");
                    break;
                case "over":
                    setIcon("iconSkinOver");
                    break;
                case "down":
                    setIcon("iconSkinDown");
                    break;
                case "disabled":
                    setIcon("iconSkinDisabled");
                    break;
            }
        }
        private function setIcon(type:String):void {
            if (hostComponent.getStyle(type) != null) {
                icon.source = hostComponent.getStyle(type);
            }
        }
    ]]></fx:Script>

    <s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states>
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="{hostComponent.getStyle('width')}"
            height="{hostComponent.getStyle('height')}"
            radiusX="2" radiusY="2">
        <s:stroke>
            <s:SolidColorStroke id="outline" weight="1"/>
        </s:stroke>
    </s:Rect>
    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:Image id="icon"
                 width="{hostComponent.getStyle('width')}"
                 height="{hostComponent.getStyle('height')}"
                 source="{hostComponent.getStyle('iconSkinDown')}"
                 verticalCenter="0"
         />
    </s:Group>
</s:SparkSkin>

这种方式更加灵活，理论上可定制性更强。包括按钮的形状大小颜色都可以在 skin 中搞定。

具体使用方式：

IconButton.as

package utilX {
import spark.components.Button;

// 这里设置 IconButton 的 Style
[Style(name="iconSkinDisabled")]
[Style(name="iconSkinDown")]
[Style(name="iconSkinOver")]
[Style(name="iconSkinUp")]

public class IconButton extends Button{
　　// 构造函数
    public function IconButton(){
        super();
        });
    }
}
}

Application.mxml

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:view="viewX.*"
               fontFamily="Microsoft YaHei" width="100%">
   <fx:Style>
        .button{
              iconSkinUp: Embed(source='imgurl'),
              iconSkinDown: Embed(source='imgurl'),
              iconSkinOver: Embed(source='imgurl'),
              iconSkinDisabled: Embed(source='imgurl')
         }
   </fx:Style>    
    <view: IconButton width="20" height="20" styleName="button"  />
</s>