flex4动态更换皮肤

as3编程:Flex4项目动态换皮肤的实现方法

在Flex项目的源文件夹内新建一个assets文件夹，用来放置css样式文件

创建main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="450" height="262" creationComplete="init();">

 <fx:Declarations>

  <!-- 将非可视元素（例如服务、值对象）放在此处 -->

 </fx:Declarations>

 <fx:Metadata>

  [ResourceBundle("admin")]

 </fx:Metadata>

 <fx:Script source="main.as"/>

 <mx:ComboBox id="cmbStyle" dataProvider="{styles}" x="261" y="10" width="71"/>

 <mx:Button id="btnSubmit" x="178" y="189" label="{resourceManager.getString('admin','btnSubmit')}"/>

 <mx:Button id="btnCancel" x="280" y="189" label="{resourceManager.getString('admin','btnCancel')}"/>

</mx:Application>

创建main.as

import mx.collections.ArrayCollection;

import mx.controls.ComboBox;

import mx.events.ListEvent;

import mx.styles.StyleManager;

[Bindable]

private var styles:ArrayCollection=new ArrayCollection([{label:"春天",data:1},{label:"夏天",data:2},{label:"秋天",data:3}]);

private function init():void

{

 this.cmbStyle.addEventListener(ListEvent.CHANGE,cmbStyles_changeHandler);

}

private function cmbStyles_changeHandler(event:ListEvent):void

{

 var cmbStyles:ComboBox=event.target as ComboBox;

 switch(cmbStyles.selectedItem.data)

 {

  case 1:

   changeStyle("style_Spring");

   break;

  case 2:

   changeStyle("style_Summer");

   break;

  case 3:

   changeStyle("style_Autumn");

   break;

 }

}

private function changeStyle(style:String):void

{

 //更换皮肤

 StyleManager.loadStyleDeclarations("assets/"+style+".swf");

}

创建style_Spring.css

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

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#bluestripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:12px;

}

注：backgroundImage: Embed(source=”assets/backgrounds.swf#redstripe”);这里是用了自己的swf文件中的皮肤，这里大家可以自己做，如果只是看效果把这行注释了

创建style_Summer.css

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

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#greenstripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:14px;

}

创建style_Autumn.css

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

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#redstripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:16px;

}

以上css样式文件全部放在上面新建的assets文件夹中，然后在包资源管理器中点右键->将CSS编译为SWF，每个css文件都要做这一步，最后运行就可以看到效果了