先看效果图：

其中Test.mxml为：

复制代码 代码如下:

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955″ minHeight=”600″>
<fx:Declarations>
<!– 将非可视元素（例如服务、值对象）放在此处 –>
</fx:Declarations>
<mx:HBox horizontalCenter=”0″ verticalCenter=”1″>
<s:Button skinClass=”components.RightButtonSkin” />
<s:Button skinClass=”components.CancelButtonSkin” />
<s:Button skinClass=”components.NewStyleButtonSkin”/>
<s:Button skinClass=”components.StyleButtonSkin”/>
</mx:HBox>
</s:Application>

RightButtonSkin.mxml(确定按钮皮肤)：

复制代码 代码如下:

<?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” alpha.disabled=”.5″>

<!– states –>
<s:states>
<s:State />
<s:State />
<s:State />
<s:State />
</s:states>

<!– border and fill –>
<s:Rect radiusX=”4″ radiusY=”4″ top=”0″ right=”0″
bottom=”0″ left=”0″>
<s:fill>
<s:SolidColor color=”0xFAFAFA” color.over=”0xEEEEEE”
color.down=”0xEEEEEE”/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color=”0xCCCCCC” weight=”1″/>
</s:stroke>
</s:Rect>

<!– highlight on top –>
<s:Rect radiusX=”4″ radiusY=”4″ top=”2″ right=”2″ left=”2″
height=”50%”>
<s:fill>
<s:LinearGradient rotation=”90″>
<s:GradientEntry color=”0xFFFFFF” alpha=”.5″/>
<s:GradientEntry color=”0xFFFFFF” alpha=”.1″/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<s:Label text=”确定” color=”0x131313″
textAlign=”center”
fontFamily=”宋体”
verticalAlign=”middle”
horizontalCenter=”0″ verticalCenter=”1″
left=”30″ right=”30″ top=”8″ bottom=”8″
/>
</s:Skin>

NewStyleButtonSkin.mxml(新建按钮皮肤)：

ps：新建按钮上面那个icon是画上去的

复制代码 代码如下:

<?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” alpha.disabled=”.5″>

<!– states –>
<s:states>
<s:State />
<s:State />
<s:State />
<s:State />
</s:states>

<!– border and fill –>
<s:Rect radiusX=”4″ radiusY=”4″ top=”0″ right=”0″
bottom=”0″ left=”0″>
<s:fill>
<s:SolidColor color=”0xFAFAFA” color.over=”0xEEEEEE” color.down=”0xEEEEEE”/>
</s:fill>

<s:stroke>
<s:SolidColorStroke color=”0xCCCCCC” weight=”1″/>
</s:stroke>
</s:Rect>

<!– highlight on top –>
<s:Rect radiusX=”4″ radiusY=”4″ top=”2″ right=”2″ left=”2″
height=”50%”>
<s:fill>
<s:LinearGradient rotation=”90″>
<s:GradientEntry color=”0xFFFFFF” alpha=”.5″/>
<s:GradientEntry color=”0xFFFFFF” alpha=”.1″/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Graphic>
<s:BitmapImage source=”assets/round_plus2.png” left=”8″ top=”6″/>
</s:Graphic>
<s:Label text=”新建样式” color=”0x131313″
fontFamily=”宋体”
left=”30″ right=”20″ top=”8″ bottom=”8″
/>

</s:Skin>