FLEX工程动态如何切换皮肤

最新推荐文章于 2025-12-19 11:59:32 发布

原创最新推荐文章于 2025-12-19 11:59:32 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flex #radiobutton #css #library #button #flash

本文介绍在Flex框架中通过CSS文件、SWF文件和StyleManager API实现动态样式管理的方法，包括创建主题CSS文件、编译CSS为SWF、在AS代码中加载SWF文件以及使用Flex Catalyst生成皮肤，实现美工与程序员工作的分离。

StyleManager.loadStyleDeclarations('Offical.swf');

可惜现在csdn没有在线截图功能，需要浏览上传，我实在非常懒惰，不截图，只做文字些许总结

1.在src根目录构建一个某主题的css文件

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|BorderContainer#HeaderBar{
	skin-class:ClassReference("skin.offical.HeaderSkin");
}
s|BorderContainer#Divider1{
	skin-class:ClassReference("skin.offical.Divider");
}
/*符号#代表指定的ID*/
s|Label#labelExamples{
	font-size:14;
	color:#990099;
}
s|CheckBox{
	font-size:9;
	color:#FF3300;
}
s|RadioButton{
	font-size:92;
	color:#990099;
}
s|Button{
	font-size:32;
	color:#FF3300;
}
s|Button#menu{
	skin-class:ClassReference("skin.offical.menubutton");
}
s|Button#menu1{
	skin-class:ClassReference("skin.offical.menubutton");
}
mx|PopUpMenuButton#menu{
	cornerRadius: 0;
	height: 52px;
	backgroundAlpha: 0;
	fillAlphas: 0,0,0,0;
	highlightAlphas: 0, 0;
	arrowButtonWidth: 52;
	borderColor: #ff0000;
}

比如s|Button#menu这个书写方式：s就是spark框架，Button控件类，对应id叫做menu的按钮。

具体的一些控件样式的基本代码的书写，如果不是很专业的话，可以用这个工具，直接在线生成，拷贝进来即可。

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

关于FLASH CATALYST生成的skin在后边会讲到，css代码负责进行调用，是不是在MXML和AS文件里。这样就做到了美工和程序员工作的分离，避免了交集和混乱。

2、生成“样式文件名.swf”文件

在工作空间里的css文件上点右键，在右键菜单中选择“将CSS编译为SWF”，并让这个菜单项前面一直保持有一个小勾的图标，这代表你每修改一次css文件，FB都会实时地更新对应的swf。选择菜单项完毕后，在bin-debug文件夹中会出现与css文件同名的swf文件，这个文件就是被整个系统实时加载动态更新样式的基础文件。

3、AS代码加载“样式.swf”的方式

StyleManager.loadStyleDeclarations('Offical.swf');

一般默认在应用初始化完成后在creationComplete的函数里写。动态初始化无非是反复调用这个方法，传不同的“样式.swf”文件来动态改变整个系统样式。

4、使用FLASH CATALYST制作皮肤