flex4皮肤

1.都继承SparkSkin类

2.都要指定HostComponet[]

3.Group绝对定位来层叠显示

4.描述边框：

<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="red"/>
<s:GradientEntry color="blue"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

?<s:Rect id="border" left="0" right="0" top="0" bottom="0">
? ? ? ? ? ? <s:stroke>
? ? ? ? ? ? ? ? <!--- @private -->
? ? ? ? ? ? ? ? <s:SolidColorStroke id="borderStroke" weight="1"/>
? ? ? ? ? ? </s:stroke>
? ? </s:Rect>

5.描述填充：

<s:Rect id="tbFill" left="20" right="20" top="20" bottom="20">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="blue"/>
<s:GradientEntry color="yellow"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

?<s:Rect id="tbDiv" left="0" right="0" bottom="0" height="1">
? ? ? ? ? ? ? ? ? ? <s:fill>
? ? ? ? ? ? ? ? ? ? ? ? <s:SolidColor color="0xC0C0C0"/>
? ? ? ? ? ? ? ? ? ? </s:fill>
?</s:Rect>

6.设置矩形投影（阴影）:

<s:RectangularDropShadow id="dropShadow" left="0" right="0" top="0" bottom="0" alpha="0.32"
angle="90" blurX="20" blurY="20" color="#000000" distance="11"/>

7. ?设置状态：

<s:states>
? ? ? ? <s:State name="normal"/>
? ? ? ? <s:State name="disabled"/>
? ? ? ? <s:State name="normalWithControlBar" stateGroups="withControls"/>
? ? ? ? <s:State name="disabledWithControlBar" stateGroups="withControls"/>
? ? </s:states>

那么如何通过设置组件的状态来改变皮肤的显示呢？

下面举个例子：

TextInput 组件的enabled设置方法源码：

?override public function set enabled(value:Boolean):void
? ? {
? ? ? ? if (textDisplay)
? ? ? ? ? ? textDisplay.enabled = value;
? ? ? ??
? ? ? ? if (value == super.enabled)
? ? ? ? ? ? return;
? ? ? ??
? ? ? ? super.enabled = value;
? }

?override protected function getCurrentSkinState():String
? ? {
? ? ? ? var showPromptWhenFocused:Boolean = getStyle("showPromptWhenFocused");
? ? ? ??
? ? ? ? if ((showPromptWhenFocused ||?
? ? ? ? ? ? focusManager && focusManager.getFocus() != focusManager.findFocusManagerComponent(this)) &&?
? ? ? ? ? ? prompt != null && prompt != "")
? ? ? ? {
? ? ? ? ? ? if (text.length == 0)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if (enabled && skin && skin.hasState("normalWithPrompt"))
? ? ? ? ? ? ? ? ? ? return "normalWithPrompt";
? ? ? ? ? ? ? ? if (!enabled && skin && skin.hasState("disabledWithPrompt"))
? ? ? ? ? ? ? ? ? ? return "disabledWithPrompt";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return enabled ? "normal" : "disabled";
? ? }

getCurrentSkinState ?enabled属性应该是绑定好的，而这个方法也可能是绑定好的，一旦属性变化，就会调用此方法。

可以看出组件的属性变动，会修改相应的状态，而状态的变动则会影响皮肤的显示

8.皮肤中的文本域通常由如下组件实现：

<s:RichEditableText id="textDisplay"
? ? ? ? ? ? ? verticalAlign="middle"
? ? ? ? ? ? ? widthInChars="10"
? ? ? ? ? ? ? left="1" right="1" top="1" bottom="1" />

TextArea组件跟TextInput组件的区别就是在这个文本域上加了个Scroller