通过单击 FLEX 3 中的按钮动态选择 css 文件答案

【问题标题】：Selecting css file dynamically by clicking on the button in FLEX 3通过单击 FLEX 3 中的按钮动态选择 css 文件
【发布时间】：2011-12-19 06:25:22
【问题描述】：

我需要创建一个应用程序，我们在其中更改应用程序的样式，即基于按钮单击的应用程序主题。

我已经下载了所有包含不同 CSS 文件的主题。我需要为应用程序动态声明 CSS 以应用该主题。

我有文件名 Theme1.css、Theme2.css、Theme3.css、Theme4.css、Theme5.css。

当我点击 Theme 1 按钮时，我需要应用 Theme1.css 文件作为样式源。类似于当我点击 Theme 2 按钮时，我需要应用 Theme2.css 文件作为样式源。

注意：css 文件包含应用程序和应用程序组件的样式。

祝你有美好的一天......

【问题讨论】：

标签： css apache-flex flex3 styles stylesheet

【解决方案1】：

您必须使用 eclipse/flex builder 中的工具将 CSS 编译为 SWF，以便可以在运行时更改样式。

您还必须维护当前主题 ID 的实例变量。

这是你要找的吗？

public function switchTheme(theme:int):void {
    StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
    StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
    this.currentTheme = theme;
}

然后，您可以将每个按钮的点击处理程序分配给 switchTheme 函数 - 将主题 ID 作为参数传递。

【讨论】：

嗨，罗伊，感谢您的回答。但仍然面临问题。当我调用方法 unloadStyleDeclaration 时，它给了我一个异常。所以简而言之，它不起作用。
@SagarRawal，如果你让我知道例外情况，也许我可以提供帮助。
我收到错误消息：“TypeError：错误 #1009：无法访问空对象引用的属性或方法。”在 StyleManagerImpl.as 的 900 行，我正在使用 FLEX SDK 3.4....
您确实在函数上方某处初始化了变量 currentTheme，对吗？

【解决方案2】：

我认为您必须逐个循环所有控件并在控件上设置主题。例如。如果您将默认主题设置为红色且按钮为红色，则将主题更改为蓝色，然后使用循环控制将按钮颜色设置为蓝色。可能对你有帮助....

如果你听不懂我在说什么，请问我......

谢谢。

【讨论】：

嗨 Manoj，当用户单击按钮时，我不需要更改主题。先了解问题再回答。
嗨，Sagar Rawal，我的解决方案对您也有帮助。请尝试循环所有控件，然后问我是否有任何问题。
它也对我有帮助...很好的解决方案 Manoj Savalia

【解决方案3】：

您需要将 CSS 文件编译为 SWF。您可以在 Flash Builder 的资源管理器窗口中右键单击 CSS 文件，然后从菜单中选择“将 CSS 编译为 SWF”。

然后您使用StyleManager 中的loadStyleDeclarations() 方法来加载包含您的CSS 信息的SWF 文件。

上一步只会将新样式添加到您的样式子系统中。如果要清除旧样式，首先需要unloadStyleDeclarations()方法。

如果您卸载当前活动的 CSS 声明，请使用 false 作为第二个参数，以便 StyleManager 不会使样式无效并为舞台上的组件重建样式声明链/缓存。这不仅速度慢，而且会导致在应用新样式之前使用默认样式刷新屏幕。

您可以有类似的东西，并在您想更改主题时使用适当的 URL 调用 applyTheme('url/to/theme.swf')：

private var currentThemeURL:String = 'themes/default.swf';

public function applyTheme(themeURL:String):void
{
    StyleManager.unloadStyleDeclarations(currentThemeURL, false);

    StyleManager.loadStyleDeclarations(themeURL);
    currentTheme = themeURL;
}

【讨论】：