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的根目录下,编译出来的类便正常地包含了自定义的类。