flex动态加载使用css文件实例-优快云博客

本文介绍了一种使用Flex创建应用程序的方法，通过动态加载不同的CSS文件来改变应用的主题颜色。示例代码展示了如何设置下拉框以选择不同的颜色主题，并在选定后加载相应的CSS文件实现界面风格的即时变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 css_dynaset.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/halo"
			   minWidth="1024" minHeight="768"
			   creationComplete="init();">

	<fx:Script>
		<![CDATA[
			import mx.styles.StyleManager;
			import mx.collections.ArrayCollection;

			/*由于css文件不自动编译成.swf文件，因此每保存好一次记得就要手动编译一次*/

			private function init():void{
				var array:Array = new Array();
				array.unshift({label:"红", selfColor:"red.swf"});    //必须以label为名
				array.unshift({label:"绿", selfColor:"green.swf"});
				array.unshift({label:"蓝", selfColor:"blue.swf"});
				comboBoxID.dataProvider = new ArrayCollection(array);
			}

			private function loadStyles(styleURL:String):void{
				StyleManager.loadStyleDeclarations(styleURL);    //动态加载css的函数
			}

		]]>
	</fx:Script>

	<mx:ComboBox id="comboBoxID" x="500" y="50" prompt="Please select a style"
				 change="loadStyles(comboBoxID.selectedItem.selfColor);"/>

</s:Application>

2、 blue.css


/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

/* blue.css */
s|Application{ 
	backgroundColor: haloBlue;
}

3、 green.css


/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

/* green.css */
s|Application{ 
	backgroundColor: haloGreen;
}

4、 red.css


/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

/* red.css */
s|Application{ 
	backgroundColor: red;
}