Question

有人错过了为简单按钮设置皮肤的简单方法吗？

<mx:Button x="10" y="10" label=""
           upSkin="@Embed('imgs/mainButton_std.png')"
           overSkin="@Embed('imgs/mainButton_over.png')"
           downSkin="@Embed('imgs/mainButton_over.png')"
           disabledSkin="@Embed('imgs/mainButton_std.png')"
           creationComplete="mainButtonHitArea()"
           width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area

我遇到的问题是，这种创建带皮肤的简单按钮的方法正在逐步淘汰：事实上，Flex 4.5移动项目不再支持它。

所以问题：是否有一种简单的方法来执行此操作，使用spark按钮（这可能是新的方法）。尽可能简单。

基本上我只需要一个带有2张图像的按钮：向下/向上＆amp;起来。我想让代码保持尽可能简单：新的蒙皮方法似乎真的为以前的例子提供了太多的线条。

Answer 1

你可以创建一个皮肤，即（作为MyButtonSkin.mxml）：

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="MyButtonSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>    
    <s:BitmapImage source.disabled="@Embed('assets/image1.png')" 
                source.down="@Embed('assets/image2.png')" 
                source.up="@Embed('assets/image3.png')" 
                source.over="@Embed('assets/image4.png')" />
</s:SparkSkin>

然后您可以将该皮肤分配给某个按钮：

<s:Button skinClass="MyButtonSkin"/>

Answer 2

这是一个更为通用的基本图像按钮：

ImageButtonSkin.mxml

<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">
    <fx:Metadata>
        [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage id="image"
                   source.up="{getStyle('upImage')}"
                   source.down="{getStyle('downImage')}"
                   source.over="{getStyle('overImage')}"
                   source.disabled="{getStyle('disabledImage')}"
                   />
</s:SparkButtonSkin>

ImageSkinnableButton.as

[Style(name="upImage", inherit="no", type="Class")]
[Style(name="downImage", inherit="no", type="Class")]
[Style(name="overImage", inherit="no", type="Class")]
[Style(name="disabledImage", inherit="no", type="Class")]
public class ImageSkinnableButton extends Button
{
    public function ImageSkinnableButton()
    {
        super();
        setStyle("skinClass", ImageButtonSkin);
    }
}

然后您可以在CSS（首选）或mxml中将按钮设置为按钮样式：

<commons:ImageSkinnableButton
    upImage="@Embed('imgs/mainButton_std.png')"
    overImage="@Embed('imgs/mainButton_over.png')"
    downImage="@Embed('imgs/mainButton_over.png')"
    disabledImage="@Embed('imgs/mainButton_std.png')" />

Answer 3

您还可以为默认的spark.components.Button组件定义ButtonImageSkin，例如在imageskins包中：

<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">
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="{getStyle('backgroundImage')}"/>
</s:SparkButtonSkin>

只需在皮肤类本身上定义一个样式，然后将图像的源绑定到它。现在，您可以使用CSS伪选择器控制实际图像：

@namespace imageskins "imageskins.*";
s|Button {
    skinClass: ClassReference("imageskins.ButtonImageSkin");    
}
imageskins|ButtonImageSkin:up {
    backgroundImage: Embed(source="assets/images/button-up.png");
}
imageskins|ButtonImageSkin:down {
    backgroundImage: Embed(source="assets/images/button-down.png");
}
imageskins|ButtonImageSkin:over {
    backgroundImage: Embed(source="assets/images/button-over.png");
}
imageskins|ButtonImageSkin:disabled {
    backgroundImage: Embed(source="assets/images/button-disabled.png");
}

通过这种方式，您可以使用更灵活的基于CSS的规则获得结果。我最终为各种Flex组件创建了一组基于图像的Spark皮肤：FXG更强大，但有时使用scale9图像只是获得所需结果的最快方式。

附注：如果您将皮肤类和CSS文件（带有任何名称）放在Flex库项目中，并使用-theme选项编译客户端项目，Flex将自动应用CSS ..在创建时很有用一组皮肤以及将它们与主机组件相关联的CSS。

flex 4.5简单的火花按钮剥皮

3 个答案: