先看效果圖：
其中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 id="rightButton" skinClass="components.RightButtonSkin" />
s:Button id="cancelButton" skinClass="components.CancelButtonSkin" />
s:Button id="newStyleButton" skinClass="components.NewStyleButtonSkin"/>
s:Button id="StyleButton" 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 name="up" />
s:State name="over" />
s:State name="down" />
s:State name="disabled" />
/s:states>
!-- border and fill -->
s:Rect id="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 name="up" />
s:State name="over" />
s:State name="down" />
s:State name="disabled" />
/s:states>
!-- border and fill -->
s:Rect id="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>
您可能感興趣的文章:- C# SkinEngine控件 給窗體添加皮膚的方法
- JQuery UI皮膚定制
- flex中如何用圖像給按鈕做皮膚
- ASP、PHP與javascript根據時段自動切換CSS皮膚的代碼
- flex中使用css樣式修改TextArea滾動條的皮膚代碼
- jQuery切換網頁皮膚并保存到Cookie示例代碼
- JQuery給網頁更換皮膚的方法
- python實現360皮膚按鈕控件示例
- flex動態加載swf皮膚示例代碼
- js仿百度切換皮膚功能（html+css）
