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;
}
{
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