在上一篇 中，定義了一個最簡單的SkinnableComponent并為其定義了兩個Skin。

對于TransitionSkin，需要在enable時有不同的展現方式，這可以通過Skin State實現。

?

對自定義的SkinnableComponent的修改

?

首先在組件中定義isEnabled屬性：

private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; }

?

然后定義SkinState元標簽：

[SkinState("normal")] [SkinState("enable")]

?

最后需要將屬性值和組件狀態關聯起來，這是通過覆蓋SkinnableComponent的getCurrentSkinState方法實現的。

該方法的最初定義如下：

/** * Returns the name of the state to be applied to the skin. For example, a * Button component could return the String "up", "down", "over", or "disabled" * to specify the state. * * <p>A subclass of SkinnableComponent must override this method to return a value.</p> * * @return A string specifying the name of the state to apply to the skin. * * @langversion 3.0 * @playerversion Flash 10 * @playerversion AIR 1.5 * @productversion Flex 4 */ protected function getCurrentSkinState():String { return null; }

?

在Node中需要覆蓋該方法：

override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; }

?

完整的Node代碼如下：

Node.as

package skinsample { [SkinState("normal")] [SkinState("enable")] import spark.components.supportClasses.SkinnableComponent; public class Node extends SkinnableComponent { public function Node() { super(); } private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; } override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; } } }

對Skin的修改

Skin中首先需要增加狀態的聲明：

<s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states>

接下來可以指定Skin元素在哪個狀態中出現，默認是在所有狀態中出現。XML節點和屬性都可以進行指定。

對于XML節點，增加includeIn屬性，如：

<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />

對于XML屬性，增加 屬性名稱.狀態名稱 指定特定狀態下的屬性值，如：

<s:SolidColor color="0x131313" color.enable="0xff0000" />

?

完整的Skin代碼如下：

TransitionSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> <s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x131313" color.enable="0xff0000" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect> <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/> </s:Skin>

?

PlaceSkin.mxml

<?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> <s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states> <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Ellipse> </s:Skin>

?

使用具有狀態的組件和Skin

定義好組件和Skin后，就可以使用了：

NodeSample.mxml

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:skinsample="skinsample.*"> <fx:Script> <!--[CDATA[ import skinsample.TransitionSkin; ]]--> </fx:Script> <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/> <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/> <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/> </s:WindowedApplication>

?

運行效果：

?

?

轉載于:https://www.cnblogs.com/holbrook/archive/2009/10/06/2357375.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Flex4中的皮肤(2): Skin State的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。