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>