Flex4 Spark皮肤

### Flex4 Spark皮肤详细制作讲解####一、引言在Flex4中，Adobe引入了新的皮肤系统，称为Spark Skin系统，旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 ####二、Spark Skin与Skin类的关系在Flex4中，`spark.skins`包含了一个核心类`SparkSkin`。`SparkSkin`是一个继承自`Group`类型的容器，这意味着它可以包含任何类型的Flex组件。此外，`SparkSkin`是所有`mx.spark`可视化控件外观的基础类。换句话说，所有可视化的Spark控件的外观都必须继承自`SparkSkin`。值得注意的是，`SparkSkin`自身也继承自`Skin`类，而`Skin`类同样继承自`Group`。因此，`Skin`和`SparkSkin`都具有相似的功能，并且都可以用来实现自定义控件的样式。例如，`ButtonBarSkin`就是`Skin`的子类。如果想要自定义`ButtonBar`这样的组件，那么可以选择使用`Skin`。 ####三、Spark Skin的基本结构下面是一段使用`SparkSkin`定义按钮样式的示例代码： ```xml [HostComponent("spark.components.Button")] ```在这段代码中，首先定义了按钮的四种状态（`up`、`over`、`down`和`disabled`），然后通过`[HostComponent("spark.components.Button")]`元数据指定该皮肤适用于`Button`组件。接下来，定义了按钮的主要视觉元素，包括背景颜色和文本样式。 ####四、应用Spark Skin的方式定义好皮肤后，可以通过以下几种方式将其应用于具体的Flex控件上： 1. **MXML代码方式**：直接在MXML文件中设置`skinClass`属性为定义好的皮肤类的完整命名空间路径。例如： ```xml ``` 2. **ActionScript代码方式**：在ActionScript代码中设置控件的`skinClass`属性。 ```actionscript myButton.setStyle("skinClass", Class(cn.xuedi.SelfButton)); ``` 3. **样式表方式**：通过CSS样式表来设置控件的`skinClass`属性。 ```css Button { skinClass: ClassReference("cn.xuedi.SelfButton"); } ``` ####五、总结通过上述介绍，我们可以了解到在Flex4中自定义控件样式的方法。`SparkSkin`和`Skin`类提供了强大的工具来定制界面的外观。无论是通过MXML还是ActionScript，甚至是CSS样式表，都可以轻松地应用这些自定义皮肤到控件上。这对于开发高质量、具有独特风格的应用程序来说至关重要。