Flex4 - 设置button按钮背景图片(up,down,over等各状态)
作者:hangge | 2015-04-07 16:07
Flex4中,如果要设置spark组件的button按钮背景图,可以通过自定义皮肤来实现。在皮肤中添加BitmapImage组件,分别设置在各个状态下的图片即可(同时背景图可使用9宫格样式,便于拉伸)。代码如下:
--- 使用 ---
--- 按钮皮肤 ImageBgButtonSkin.mxml ---
<?xml version="1.0" encoding="utf-8"?> <s:SparkButtonSkin 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"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [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> <s:BitmapImage width="100%" height="100%" source="@Embed('up.png', scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')" source.over="@Embed('over.png', scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')" source.down="@Embed('down.png', scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')" source.disabled="@Embed('disabled.png', scaleGridTop='13', scaleGridBottom='49', scaleGridLeft='15', scaleGridRight='237')" /> <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" verticalAlign="middle" left="10" right="10" top="2" bottom="2"> </s:Label> </s:SparkButtonSkin>
--- 使用 ---
<s:Button label="spark按钮" width="200" height="70" skinClass="ImageBgButtonSkin"/>
全部评论(0)