Flex 4中Spark组件利用Skin Class外观设计(2)

SkinClass借助 FXG和状态语法完成组件的交互式设计。

FXG也有类似提取公共方法的功能，其实现依靠Library标签。

比如设计中用到好多处外观相同的“竖线”，不过摆放的位置不同，当然不用每用到一处就写一遍相似度达99%的代码，使用FXG的Library标签就可以将其提取简化。

直接把“竖线”代码放在<fx:Library/>中，设好其id，下面用到处使用<fx:id x="..." y="..."/>进行调用便可。

以下是本人写的一个简单实例：

<?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/mx">

	<fx:Library>

		<fx:Definition name="fg">

			<s:Group alpha="0.5">

				<s:Line x="1" xFrom="0.5" xTo="0.5" yTo="34">

					<s:stroke>

						<s:SolidColorStroke color="#ffffff" caps="none" weight="1" joints="miter" miterLimit="4"/>

					</s:stroke>

				</s:Line>

				<s:Line xFrom="0.5" xTo="0.5" yTo="34">

					<s:stroke>

						<s:SolidColorStroke color="#000000" caps="none" weight="1" joints="miter" miterLimit="4"/>

					</s:stroke>

				</s:Line>

			</s:Group>

		</fx:Definition>

	</fx:Library>

	<s:states>

		<s:State name="normal"/>

	</s:states>

	<s:filters>

		<s:DropShadowFilter alpha="0.5" angle="90" distance="1.7" quality="2"/>

	</s:filters>

	<s:Path winding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.5 0.5L730.5 0.5C732.709 0.5 734.5 2.29102 734.5 4.5L734.5 35.5" >

		<s:fill>

			<s:LinearGradient x="367.5" y="35.5" scaleX="35" rotation="-90">

				<s:GradientEntry color="#00738c" ratio="0"/>

				<s:GradientEntry color="#49b7d3" ratio="0.04"/>

				<s:GradientEntry color="#366cad" ratio="0.96"/>

				<s:GradientEntry color="#bfeffb" ratio="1"/>

			</s:LinearGradient>

		</s:fill>

		<s:stroke>

			<s:SolidColorStroke color="#001fa4" caps="none" weight="1" joints="miter" miterLimit="4"/>

		</s:stroke>

	</s:Path>

	<fx:fg x="465" y="1"/>

	<fx:fg x="600" y="1"/>

</s:Skin>

效果如下图：


来自http://flex4jiaocheng.com/blog/268