使用Flex来创建自己的组件或者皮肤，只需要继承直接继承SkinnableComponent，在使用时只需要将希望改变皮肤的组件的skinClass赋值成刚才的皮肤即可。
深入的使用是在皮肤中创建state。
首先在组件中定义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方法实现的。
在组件中需要重写的方法：
override protected function getCurrentSkinState():String
? ? {
? ? if(isEnabled)
? ? return "enable";
? ? return "normal";
? ? }
以下为完成代码：扩展的组件的类：
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";
? ? }
}
}
在皮肤中作如下声明：
? ? <s:states>
? ? ? ? <s:State name="normal" />
? ? ? ? <s:State name="enable" />
? ? </s:states>
皮肤中的元素就可以这样用了：<s:Button top="0" right="0" bottom="0" left="0" alpha="0"?includeIn="enable,normal"?/>
完整的皮肤示例：
<?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>
在皮肤中如何引用组件的一个属性：
在皮肤组件中需要指定：
<fx:Metadata>
? ?[HostComponent("skinsample.Node")]//组件的位置
</fx:Metadata>
就可以这样引用：<s:SimpleText text="{hostComponent.tokenCount}?".../>
参考自：http://blog.csdn.net/thinkinside/article/details/4635116
