Flex 设置组件的样式

Flex 设置组件的样式
在 Flex 中, 可以使用以下几种方法将样式应用到控件:
1.使用本地样式定义
2.使用外部样式表
3.使用线上样式
4.使用 setStyle() 方法

Flex 不支持使用层叠样式表 (CSS) 来控制组件的所有可视方面。属性, 比如 x, y, width 和 height 是 UIComponent 类的属性, 而不是其样式, 因此, 无法在 CSS 中进行设置。您还必须知道您的主题支持哪些属性。Flex 中的默认主题并不支持所有样式属性。

主题是定义 Flex 应用程序的外观和感觉的一组样式。主题可以将一些事项定义得像应用程序的配色方案或常见字体一样简单, 或者它可以成为应用程序所使用的所有组件的完全重新设置的外观。主题通常采取 SWC 文件的形式。但是, 主题也可以是 CSS 文件和嵌入式图形资源, 如来自 SWF 文件的符号。

使用本地样式定义

可以使用 标签在 MXML 文件中创建本地样式定义。 此标签包含符合 CSS 2.0 语法的样式表定义。 这些定义应用到当前文档和当前文档的所有子级。
MXML如下:

VBox{border-style:solid; }
.VBoxRed{border-color:#ff0000; border-thickness:5px; }
.VBoxGreen{border-color:#008800;border-thickness:2px;padding-top:10px;padding-right:50px;padding-bottom:20px;padding-left:5px;background-color:#99cc00;}

使用外部样式表

Flex 支持外部 CSS 样式表。若要将样式表应用到当前文档及其子文档, 请使用 标签的 source 属性。

注意: 您应尝试限制在应用程序中使用的样式表的数量, 并在应用程序中仅设置处于顶层文档的样式表 (顶层文档是包含 标签的文档)。如果您在子文档中设置一个样式表, 则会发生异常结果。

CSS如下:

VBox{border-style:solid; }
.VBoxRed{border-color:#ff0000; border-thickness:5px; }
.VBoxGreen{border-color:#008800;border-thickness:2px;padding-top:10px;padding-right:50px;padding-bottom:20px;padding-left:5px;background-color:#99cc00;}

MXML如下:

使用线上样式

可以将样式属性设置为 MXML 标签中该组件的属性。除了通过使用 setStyle() 标签定义的运行时样式更改之外, 线上样式定义优先于任何其他样式定义。例如, 您可以通过使用 标签的 paddingTop 和 paddingBottom 属性在 Box 容器的边框与其内容之间设置填充。 类似地, 您可以使用 borderStyle 属性来定义组件的边框的可视外观。

使用 setStyle() 方法

使用 setStyle() 方法操纵 ActionScript 中的控件实例的样式属性。 使用此方法应用样式与使用样式表应用样式相比, 需要在客户端上有更大数量的处理功率, 但对如何应用样式提供更多粒度控制。
setStyle() 方法采用两个参数: 样式名称和样式值。
MXML如下:

private function setStyleOk():void
{
myVBox1.setStyle("borderThickness",5);
}
]]>