Flex 设置组件的样式

在 Flex 中, 可以使用以下几种方法将样式应用到控件:
1.   内部样式定义
2.   外部样式表
3.   标签内样式
4.   setStyle() 方法

1   使用内部样式定义
 

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

<fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        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;}
    </fx:Style>

2   使用 外部样式表

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

MXML如下:

<fx:Style source="css/style.css"/>

style.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;}[/code]

3   使用标签内样式

可以将样式属性设置为 MXML 标签中该组件的属性。例如, 您可以通过使用 标签的 paddingTop 和 paddingBottom 属性在 Box 容器的边框与其内容之间设置填充。 类似地, 您可以使用 borderStyle 属性来定义组件的边框的可视外观。

4  使用 setStyle() 方法

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