1

我的应用程序中的 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>

其中 RectangleGraphic 和 SmallButtonLineSeparatorGraphic 是用于所有按钮的 FXG，而 ButtonTextGraphic 和 ButtonSymbolGraphic 是特定于每个按钮的 FXG。我很想拥有一个模板皮肤，为每个按钮提供两个特定的 FXG，但我不确定如何最好地做到这一点。

4

1 回答 1

2

您必须使用一些 ActionScript 魔术才能使其正常工作。可能将 RectangleGraphic 和 SmallButtonLineSeparatorGraphic 保留在 MXML 中。为 ButtonTextGraphic 和 ButtonSymbolGraphic 创建变量。我将仅演示使用 ButtonTextGraphic 的示例。像这样的东西：

public var buttonTextGraphicClass : Class;

还有类实例的变量：

public var buttonTextGraphic : Class;

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

buttonTextGraphicClass = ButtonTextGraphic;

在 createChildren 创建实例并添加它们：

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

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

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

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

我建议阅读Flex Component LifeCycle。如果您有 Z-Order 问题；您可能必须切换到在 ActionScript 中创建所有皮肤的子项；或者可能使用“addElementAt”方法。

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

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

于 2011-06-04T17:05:58.423 回答