2

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

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

有没有什么简单的方法可以在 flex 4.5 中创建皮肤主题并在库中管理资产（图标、fxg）？

提前致谢

4

1 回答 1

2

创建自定义主题

我想您已经知道这一点，但是创建自定义主题很简单：

  • 为每个组件创建自定义皮肤
  • 创建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;

}

我在我的自定义版本中实现了这个接口：

  • 火花皮肤
  • 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 中的名称和路径相同，您就应该能够用一个替换另一个。

于 2013-04-06T21:52:40.233 回答