FLEX中实现动态样式切换例子

1.创建Flex工程， 实现代码

1.> Hello.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
????? xmlns:s="library://ns.adobe.com/flex/spark"
????? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
?<s:layout>
??<s:BasicLayout />
?</s:layout>
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?<!-- 设定应用样式 -->
?<fx:Script>
??<![CDATA[
???import mx.managers.SystemManagerGlobals;
???private var manager:IStyleManager2 = StyleManager.getStyleManager(null);
???
???private function changeCSS():void{
????//动态加载编译后的样式
????manager.loadStyleDeclarations("cssTest2.swf");
???}
??]]>
?</fx:Script>
?<fx:Style source="cssTest.css"/>
?<s:Panel width="250" height="200"? horizontalCenter="0" verticalCenter="0" title="CSS显示">
??<s:layout>
???<s:BasicLayout />
??</s:layout>
??<!--响应按钮点击事件，改变样式-->
??<s:Button label="样式按钮" horizontalCenter="0" verticalCenter="0" click="changeCSS()"/>
??<s:Label text="样式文本" horizontalCenter="0" verticalCenter="-21"/>
?</s:Panel>
</s:Application>

2.> cssTest.css

/*一个测试的CSS文件*/
/*_/_/_/_/设定Button样式_/_/_/_/*/
/*@namespace "library://ns.adobe.com/flex/mx"; */

@namespace "library://ns.adobe.com/flex/spark";

Button {
fontSize: 12;
color: #FF9933;
}
/*_/_/_/_/设定Panel样式_/_/_/_/*/
Panel {
fontSize: 12;
color: #FF9933;
}
/*_/_/_/_/设定Label样式_/_/_/_/*/
Label {
fontSize: 12;
color: #FF9933;

}

3.> cssTest2.css

/* CSS file */
/*一个测试的CSS文件*/
/*_/_/_/_/设定Button样式_/_/_/_/*/
/*@namespace "library://ns.adobe.com/flex/mx"; */

@namespace "library://ns.adobe.com/flex/spark";

Button {
fontSize: 14;
color: #FF99FF;
}
/*_/_/_/_/设定Panel样式_/_/_/_/*/
Panel {
fontSize: 12;
color: #FF99FF;
}
/*_/_/_/_/设定Label样式_/_/_/_/*/
Label {
fontSize: 14;
color: #FF99FF;
}

2. 右键cssTest2.css文件,然后选择"编译CSS为SWF文件"

?

3. CSS编译成SWF之后,再使用

StyleManager.getStyleManager(null).loadStyleDeclarations("cssTest2.swf");

实现动态样式切换

?

4.注意：

如果你的CSS中定义了类似skinClass:ClassReference这样的自定义的皮肤指向,编译出来的SWF中会找不到这些自定义的类,所以会在加载CSS.SWF之后使用的过程中报找不到类的错误.这个时候,你需要把CSS文件放到SRC的根目录下,编译出来的类便正常地包含了自定义的类。