3

有人错过了为简单按钮蒙皮的旧简单方法吗？

<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 移动项目不再支持它。

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

基本上我只需要一个带有 2 个图像的按钮：向下/向上和向上。而且我想让代码尽可能简单：新的蒙皮方法似乎确实为过去像上面的示例一样简单的东西添加了太多的行。

4

3 回答 3

12

您可以创建一个皮肤，即（如 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"/>
于 2011-06-25T10:37:04.783 回答
8

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

图像按钮皮肤.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')" />
于 2011-06-25T11:31:56.833 回答
5

您还可以为默认 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。

于 2011-06-28T12:43:27.363 回答