Apache flex 使用FXG图形的按钮外观模板？

我的应用程序中的UI使用了很多按钮，这些按钮除了皮肤中使用的FXG图形外基本相同。他们的皮肤看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:graphics="assets.graphics.*" xmlns:ATE="http://ns.adobe.com/ate/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>
    <graphics:RectangleGraphic bottom="0"/> 
    <graphics:ButtonTextGraphic alpha.disabled="0.45" x="22" y="6"/>
    <graphics:ButtonSymbolGraphic alpha.disabled="0.45" x="4" y="4">
        <graphics:filters>
            <s:GlowFilter includeIn="over, down" blurX="3" blurY="3" inner="false" color="#3F5F93" strength="2" alpha="1.0" quality="2" knockout="false"/>
            <s:GlowFilter includeIn="down" blurX="3" blurY="3" inner="false" color="0x5380d0" strength="2" alpha="1.0" quality="2" knockout="false"/>
        </graphics:filters>
    </graphics:ButtonSymbolGraphic>
    <graphics:SmallButtonLineSeparatorGraphic bottom="-0.5"/>
</s:Skin>

[主机组件（“spark.components.Button”）]

其中，矩形图形和SmallButtonLineSeparatorGraphic是跨所有按钮使用的FXG，ButtonExtGraphic和ButtonSymbolGraphic是特定于每个按钮的FXG。

---

我希望有一个单一的模板皮肤，由每个按钮特定的两个FXG提供，但我不确定如何最好地做到这一点。

您必须执行一些ActionScript魔术才能使其工作。可能将矩形图和SmallButtonLineSeparatorGraphic保留为MXML中的状态。为ButtonExtGraphic和ButtonSymbolGraphic创建变量。我将演示如何使用ButtonExtGraphic作为示例。大概是这样的：

public var buttonTextGraphicClass : Class;

buttonTextGraphic.x = 22
buttonTextGraphic.y = 6
buttonTextGraphic.width = unscaledWidth // or some other value
buttonTextGraphic.height = unscaledHeight // or some value

还有类实例的变量：

public var buttonTextGraphic : Class;

在构造函数中，可以设置类值。或者，如果您无法使用MXML，请使用预初始化事件处理程序：

buttonTextGraphicClass = ButtonTextGraphic;

在createChildren中，创建并添加实例：

protected function override createChildren():void{
 super.createChildren();
 buttonTextGraphic = new buttonTextGraphicClass()
 // set other properties
 addElement(buttonTextGraphicClass);
}

最后，在updateDisplayList（）中，调整元素的大小和位置，如下所示：

public var buttonTextGraphicClass : Class;

buttonTextGraphic.x = 22
buttonTextGraphic.y = 6
buttonTextGraphic.width = unscaledWidth // or some other value
buttonTextGraphic.height = unscaledHeight // or some value

这样你可以使用完全相同的皮肤；只需在运行时为正在更改的FXG资产替换类实例

我建议你在网上好好读一读。如果您有Z顺序问题；您可能必须切换到在ActionScript中创建所有皮肤的子对象；或者可能使用“加法器”方法

为了适应ActionScript代码中的不同状态，您必须重写set-currentState方法以手动进行状态更改，例如更改辉光或更改alpha

我在这里描述的几乎所有内容都是创建ActionScript皮肤的方法。您可以查看一些现有的Flex 4.5移动皮肤。我会从移动纽扣皮肤开始。我认为边境是FXG的资产；这是使用与我在这里描述的类似的方法实现的