2024年4月8日发(作者：)

Flex 4 样式与布局

第一篇 Flex 4 与自定义布局（Layout）

Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。

您需要做的就是定义一个自定义布局。

Flex 4/Spark架构中的容器并不控制它们自己的布局。相反，每种容器具有一个布局属

性，用于确定如何在屏幕上设置子元素的布局。可以使用一个单独的Group容器，并赋予

其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。代码很简单，如下所示：

不过真正的好处在于您不必局限于框架中定义的默认布局。您可以轻松定制BaseLayout

类来实现自己定制的布局逻辑。

width="100%" height="100%"

dataProvider="{ dataSource }"

itemRenderer="SimpleItemRenderer">

（参考文章：Flex 4与自定义布局：

译文：/lihe111/archive/2009/07/06/

原文：/2009/05/ ）

第二篇 Flex 4 SkinClass 改变组件外观

在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML

文件进行定义。通过skinclass来改变外观的spark组件通常也是skinclass引用的Host

component。Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，

这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。

一、SkinClass必须包含的三样东西：

1、 HostComponent metadata

SkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的

组件。我们可以通过metadata标签来指定HostComponent。如：我们需要设置Button

的外观，那么Button就是HostComponent。

Code：

1.

2.

3. [HostComponent("")]

4. ]]>

5.

2、 States

如果HostComponent中有SkinState（一般用metadata标签来声明），例如：