Flex4 设置button按钮背景图片（up,down,over等各状态）

Flex4 - 设置button按钮背景图片（up,down,over等各状态）

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

Flex3 - 设置button按钮背景图片（up,down,over等各状态）有所有不同具体如下

在Flex3中，使用样式可以很方便的设置按钮在各状态下的背景图片，比如按下，弹起，移入，失效等。同时，这些图片还可以使用9宫格样式，以适应按钮的不同尺寸。

.btn1 {

    overSkin: Embed("over.png",

        scaleGridTop="13", scaleGridBottom="49", scaleGridLeft="15", scaleGridRight="237");

    upSkin: Embed("up.png",

        scaleGridTop="13", scaleGridBottom="49", scaleGridLeft="15", scaleGridRight="237");

    downSkin: Embed("down.png",

        scaleGridTop="13", scaleGridBottom="49", scaleGridLeft="15", scaleGridRight="237");

    disabledSkin: Embed("disabled.png",

        scaleGridTop="13", scaleGridBottom="49", scaleGridLeft="15", scaleGridRight="237");

}

         

<mx:Button label="mx按钮" width="200" height="70" styleName="btn1"/>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索背景图片
flex button、flex buttonbar、flex radiobutton、flex button icon、flex button 样式，以便于您获取更多的相关知识。