Flex 设置组件的样式

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

1?? 使用内部样式定义
?

可以使用<fx:style>

 
 

<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>

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如下: