actionscript-3 - Flex 4.5，如何创建通用换肤库并动态更改 AIR 应用程序的主题？

Question

我正在开发企业级 AIR 应用程序，我需要为多个客户端更改我的应用程序 UI，它有一个复杂的 UI，其中包含超过 250 个 MXML 皮肤文件，用于所有显示对象，例如按钮、组合框、容器等., 是否可以创建一个通用皮肤库来通过 CSS 管理皮肤和 Assets ，或者我必须为每个客户端创建一个单独的库？

目前，我正在为每个客户端复制皮肤文件，并更改 CSS(皮肤库的 default.css)中的颜色值(样式)和皮肤中的路径数据。

是否有任何简单的方法可以在 Flex 4.5 中创建换肤主题并管理库中的资源(图标、fxg)？

提前致谢

Answer 1

创建自定义主题

我想您已经知道这一点，但创建自定义主题只需:

• 为每个组件创建自定义皮肤
• 创建 defaults.css 文件来分配这些外观，并可能提供一些额外的样式信息
• 确保 css 文件包含在 SWC 中
• 使用 --theme 编译器标志(或通过 IDE 提供的任何方式)应用主题

应用不同的配色方案

您可以使用 chromeColor 和其他一些预定义样式来解决此问题，但这种方法可能会受到限制。我通过用我自己的更复杂的版本替换 Spark 皮肤基类来解决这个问题。这里有太多代码要粘贴，但归结为:

我创建了一个这样的界面:

public interface IColorizedSkin {

    function colorizeBorder(color:uint, lowLight:uint, highLight:uint):void;
    function colorizeBackground(color:uint, lowLight:uint, highLight:uint):void;
    function colorizeShadow(color:uint):void;

}

我在我的自定义版本中实现了这个接口(interface):

• SparkSkin
• SparkButtonSkin
• ColorizedItemRenderer

这三个函数是从重写的 updateDisplayList 中调用的，并使用自定义 CSS 样式名称，例如 chromeBorderColor (这是表示基色、低亮度颜色的颜色数组)以及组件边框的高亮颜色)。
所有需要着色的皮肤都扩展了这些基类。

主题库中的 defaults.css 附带默认配色方案，但您可以通过向客户端应用程序添加另一个具有不同着色指令的 css 文件来覆盖它。
请注意，由于这些自定义样式名称没有作为元数据添加到组件中，因此您只能通过 CSS 或 ActionScript 分配这些颜色，而不能通过 MXML 属性。

为图标着色

如果您的图标集使用足够中性的颜色(例如所有图标都是深灰色，或者可能是灰色渐变)，您也可以对它们进行着色。
适用于纯色的最简单方法如下:

    if (iconDisplay) {
        var colorTrans:ColorTransform = new ColorTransform();
        colorTrans.color = getStyle("color");
        iconDisplay.transform.colorTransform = colorTrans;
    }

如果您需要更细粒度的东西，则必须使用变换矩阵。

使用不同的图标

我不会将图标烘焙到皮肤中，因为这会降低灵活性。我倾向于将图标包含在库 swc 中，以便可以从那里访问它们。
如果您需要为不同的客户端应用程序使用不同的图标集，只需为每个集合创建一个仅包含这些资源(即没有编译代码)的 SWC。只要这些 SWC 中的名称和路径相同，您就应该能够用一个替换另一个。