今天聊一下FLEX中自定義皮膚的按鈕的制作。首先這是一個按鈕皮膚文件：

<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5"><!-- host component --><fx:Metadata><![CDATA[ [HostComponent("spark.components.Button")] //表明這是一個按鈕皮膚]]></fx:Metadata><!-- states --><!--按鈕的四種狀態--><s:states><s:State name="up" /><s:State name="over" /><s:State name="down" /><s:State name="disabled" /></s:states><!-- skinParts中定義的外觀部件，表示按鈕上的文字--><s:Label id="labelDisplay"textAlign="center"verticalAlign="middle"maxDisplayedLines="1"horizontalCenter="0" verticalCenter="1"left="10" right="10" top="2" bottom="2"></s:Label></s:SparkSkin>

在Flex4.0 API中，打開spark.components.Button可以看到：

這里定義了按鈕的幾種狀態，而則是按鈕的外觀部件，這里指的是按鈕上面的文字。

?

然后我為按鈕指定一個填充背景：

<s:Rect id="buttonColor" top="0" bottom="0" left="0" right="0"radiusY="50" radiusX="50"width.over="900" width.down="700" > <s:fill><s:SolidColor color.up="#0074aa" color.over="#64BC48" color.down="#FF7256"/></s:fill>

?

此時我們應用這個小皮膚會發現，按鈕上的文字有點按鈕難以看清，此時有一個小技巧就是將Label的顏色改為白色.

接下里給按鈕加上狀態切換時候的動畫：

<s:transitions><s:Transition fromState="up" toState="over"> <s:Resize target="{buttonColor}" widthBy="100"/> </s:Transition><s:Transition fromState="over" toState="up"> <s:Resize target="{buttonColor}" widthBy="-100"/> </s:Transition><s:Transition fromState="over" toState="down"> <s:Resize target="{buttonColor}" widthBy="-100"/> </s:Transition></s:transitions>

在這里我發現了一個問題，就是我用這些效果起作用的前提是你的按鈕的寬度都是固定的

<!--不能在此設定按鈕的寬度--><s:Button label="定制按鈕實例_Flex開發課堂" fontFamily="黑體" fontSize="40"top="10" skinClass="skins.really_defaultButton"horizontalCenter="0" verticalCenter="0"></s:Button>

到這里一個自定義皮膚的按鈕就做好了。

2013-07-25 09:25:04

?

?

轉載于:https://www.cnblogs.com/fuwanqiu/p/3213570.html

總結

以上是生活随笔為你收集整理的flex中自定义皮肤的按钮制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。