在上一篇 中,定义了一个最简单的SkinnableComponent并为其定义了两个Skin。
对于TransitionSkin,需要在enable时有不同的展现方式,这可以通过Skin State实现。
对自定义的SkinnableComponent的修改
首先在组件中定义isEnabled属性:
然后定义SkinState元标签:
最后需要将属性值和组件状态关联起来,这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。
该方法的最初定义如下:
在Node中需要覆盖该方法:
完整的Node代码如下:
Node.as
对Skin的修改
Skin中首先需要增加状态的声明:
接下来可以指定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
PlaceSkin.mxml
使用具有状态的组件和Skin
定义好组件和Skin后,就可以使用了:
NodeSample.mxml
运行效果: