如何在Flex 4中定制皮肤样式

来源：互联网发布：先序遍历非递归算法编辑：程序博客网时间：2024/04/27 18:18

2010-09-09 14:07:04

Flex 4中新增的组件/皮肤分离的架构（即Spark架构）是相当不错的。但是如果你想为皮肤增加一个可配置的样式，那么这个样式必须定义在组件之上。例如，如果你想在组件Button上新增加一个背景色的样式，那么你需要首先新建一个带有背景色样式的Button组件：

package{import spark.components.Button;[Style(name="backgroundColor", type="uint", format="Color")]public class SButton extends Button{ }}

然后，再创建一个新的使用背景色（backgroundcolor）样式的Button Skin文件：

<?xml version="1.0"?><s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script> import mx.utils.ColorUtil; </fx:Script> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> </s:states> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="{getStyle('backgroundColor')}" color.over="{ColorUtil.adjustBrightness2(getStyle('backgroundColor'), 64)}" color.down="{ColorUtil.adjustBrightness2(getStyle('backgroundColor'), -32)}" /> </s:fill> </s:Rect> <s:Label id="labelDisplay" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="6"/> </s:SparkSkin>

这之后，你就可以使用新Button组件和相应的皮肤了。

我们之所以不得不创建一个新的包含背景色这个样式的Button基类，是因为我们没有其它的方法可以在MXML文件里设置背景色这个样式。当然，我们可以通过CSS或者setStyle（）来设置背景色。但是，要知道，Button组件根本就没有背景色（backgroundColor）这个样式，因此，如果我们没有创建SButton类，然后试着在MXML文件里给一个Button组件设置backgroundColor属性，那么在编译的时候就会出错。

于是，我想到了一个巧妙的方法，可以不用上面提到的方法（创建一个包含新样式属性的类来实现MXML中样式设置）来设置皮肤样式。这个方法的思想是这样的，样式应定义在skin文件里，然后我们就可以在MXML中通过使用基本组件的属性来设置样式。要实现这个一个想法，我们还需要做另外一件事：为UIComponent增加一个名为“style”的属性。

通过style属性，我们可以获得样式设置的字串，那么又应如何实现style里传过来的样式设置呢？这里，我只是从语法上分析这个HTML-ish风格的字符串，然后调用了setStyle函数。

有趣的是，我正在组件上调用setStyle函数，但是由于皮肤继承了主组件（Host Component）的皮肤样式，皮肤也就获得了样式。这也意味着样式并不真的需要定义在皮肤上，只需要用在皮肤上就可以了。再次使用上面提到的例子，这里使用新的方法，我是这样设置Button组件的背景色的：

这里，我并不需要定义新的Button类（如：SButton）就可以设置Button的背景色样式了。下面是一个更复杂的例子，里面应用了更多的样式。

例子里所有的Button都使用相同的皮肤和Spark Button组件。例子的源代码可以从on github获得。

（原文：http://www.jamesward.com/2010/07/30/how-to-define-styles-on-skins-in-flex-4/ ）