(注：现在flex4方面的讲解比较少，在网上发现了这么一篇样式的文章还不错，所以贴过来查时方便，也为大家提供一下浏览，呵呵。)
在Flex4新增加了一个包：spark.skins，这个包里面只有一个类：SparkSkin，而我们（非美工的程序员）通过这个class来实现任意自定义控件的样式。
通过上述关系可以得出如下的结论：
1、SparkSkin是一个Group类型的容器。（它继承与Group）
2、是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类）
注意Skin，这个类是SparkSkin的父类，同时Skin继承与Group。
Skin：
是SparkSkin的父类，例如ButtonBarSkin就是Skin的子类，如果想要自定义这部分组件的样式，则需要使用Skin。
SparkSkin：
是全部Spark类的基础类，也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
综上所述，用SparkSkin和Skin都可达到同样的效果。
在Flex4中，我们只需要将这个button的样式继承与SparkSkin或者Skin，然后在其中加入一些想要的内容即可，请看以下代码：
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="#FFFF00“ color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x00FFFF" />
</s:stroke>
</s:Ellipse>
<s:RichText >
下面的表格描述的是 spark.components 包中定义的 Spark容器：
更多 Flex 示例，请访问 http://www.slsay.com
|
Container |
类型 |
说明 |
|
Application |
Layout |
应用程序中的第一个容器，其默认布局方式为绝对布局 |
|
DataGroup |
Layout |
展示其子元素的简单容器，包括数据条目，基于特定的布局。默认布局方式为绝对布局 |
|
Group |
Layout |
展示其子元素的简单容器，包括图形子元素，基于特定的布局。默认布局方式为绝对布局。Flex定义了两种Group的子类：拥有水平布局的HGroup，以及拥有垂直布局的VGroup。 |
|
Panel |
Layout |
展示标题栏、标题、边框及其子元素。默认布局方式为绝对布局。 |
|
SkinnableContainer |
Layout |
可皮肤化的容器，展示其子元素，包括图形子元素，基于特定的布局，支持皮肤。默认布局方式为垂直布局。 |
|
SkinableDataContainer |
Layout |
可皮肤化的布局，展示其子元素，包括数据条目，基于特定的布局，支持皮肤。默认布局方式为垂直布局。 |
下面的表格描述的是 mx.core 和 mx.components 包中定义的 Spark容器：
|
Container |
类型 |
说明 |
|
Accordion |
Navigator |
在一系列的子 Panel 容器中组织信息。这些子 Panel 容器每次只能有一个被激活。 |
|
Application |
Layout |
应用程序中的第一个容器，其默认布局方式为绝对布局 |
|
ApplicationControlBar |
Layout |
展示提供全局导航及应用程序命令的构件的容器，可停靠在应用程序的顶部。 |
|
Box(HBox & VBox) |
Layout |
以统一的行列间隔展示内容。Adobe建议有可能的话尽量使用 Spark 容器来代替 Halo Box 容器。 |
|
Canvas |
Layout |
必须确定其子元素的位置的时候需要定义的一种容器。Adobe建议有可能的话尽量使用带有BasicLayout属性的Spark容器来代替Halo Canvas容器。 |
|
ControlBar |
Layout |
在Panel或者TilteWindow容器的底部放置控件的容器。 |
|
DividedBox(HDividedBox & VDividedBox) |
Layout |
以水平或者垂直的方式放置其子元素的一种容器，跟Box容器很像，除了它能够在其子元素中间插入了可可调节的分隔符。 |
|
Form |
Layout |
以标准的表格格式来排列其子元素的一种容器。 |
|
Grid |
Layout |
一行列单元格的方式排列其子元素，就像HTML中的Table。 |
|
Panel |
Layout |
展示标题栏、标题、边框及其子元素。默认布局方式为绝对布局。Adobe建议如果可能的话尽量使用 Spark Panel，来代替 Halo Panel 容器。 |
|
TabNavigator |
Navigator |
展示带若干标签的容器，是用户在不同的内容域中进行选择。 |
|
Tile |
Layout |
定义一个将其子元素按多行或列来排列的布局。Adobe建议如果可能的话尽量使用带TileLayout的Spark容器，来代替Halo Tile容器。 |
|
TitleWindow |
Layout |
展示一个带有标题栏、标题、边框、关闭按钮及其子元素的弹出式窗口。用户可以任意移动此容器。 |
|
ViewStack |
Navigator |
定义一个每次只展示一个容器的容器栈。 |