Flex 3快速入门（8）: 构建简单的用户界面 设置组件的样式

 

设置组件的样式

样式对于定义 Adobe  Flex 应用程序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一组件的外观, 或在所有组件上应用它们。

在 Flex 中应用样式有许多方法。 某些样式提供更多粒度控制并能以编程方式被执行。其他样式不像那么灵活, 但可能需要较少的计算。在 Flex 中, 可以使用以下几种方法将样式应用到控件:

• 使用本地样式定义
• 使用外部样式表
• 使用线上样式
• 使用 setStyle() 方法

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

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

 有关主题中支持的样式属性的详细信息, 请参阅 Flex 2 开发人员指南*中的“关于支持的样式”。

 若要确定特定可视组件所支持的样式, 请参阅 Adobe Flex 2 语言参考中该组件的样式部分。

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

下面的示例创建两个类选择器, .solidBorder 和 .solidBorderPaddedVertically , 并通过使用它们的 styleName 属性来使用它们设置两个 VBox 容器的样式。 如此示例所示, 使用类选择器使您能够为相同组件的多个实例提供不同的样式。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml "
    width="150" height="140"
     viewSourceURL="src/StylesStyleTag/index.html"
>
    <mx:Style>
        .solidBorder { border-style: solid; }
       
        .solidBorderPaddedVertically
        {
            padding-top: 12;
            padding-bottom: 12;
            border-style: solid;        }
    </mx:Style>
    <mx:VBox styleName="solidBorder">
        <mx:Button label="Submit"/>
    </mx:VBox>
    <mx:VBox
        styleName="solidBorderPaddedVertically"
    >
        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

提示: 如果您希望某个特定组件的所有实例共享相同的样式, 则可以使用 CSS 类型选择器。例如, 通过使用下列类型选择器, 应用程序中的所有 VBox 实例将有一个实心边框。

VBox { border-style: solid; }

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

使用外部样式表

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

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

下面的示例在称为 external.css 的外部 CSS 文件中定义两个 CSS 类选择器。您可以通过在 <mx:Style> 标签的来源属性中指定其路径和文件名, 在 Flex 应用程序中使用外部 CSS 文件。

示例:

外部 CSS 文件
/* An external CSS file */
.solidBorder
{
    borderStyle: "solid";
}

.solidBorderPaddedVertically
{
    borderStyle: "solid";
    paddingTop: 12px;
    paddingBottom: 12px;
}

 

MXML 文件

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml "
    width="150" height="140"
    viewSourceURL="src/StylesExternal/index.html"

>
    <mx:Style source="styles/external.css" />

    <mx:VBox styleName="solidBorder">

        <mx:Button label="Submit"/>
    </mx:VBox>
   
    <mx:VBox styleName="solidBorderPaddedVertically">
        <mx:Button label="Submit"/>
    </mx:VBox>

</mx:Application>

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

使用线上样式

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

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml "
    width="150" height="140"
    viewSourceURL="src/StylesTagAttributes/index.html"

>
    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>

    </mx:VBox>
    <mx:VBox
        id="myVBox2" borderStyle="solid"
        paddingTop="12" paddingBottom="12"
    >
        <mx:Button label="Submit"/>

    </mx:VBox>
</mx:Application>

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

使用 setStyle() 方法

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

setStyle() 方法采用两个参数: 样式名称和样式值。

提示: 第一次实例化对象和设置样式时, 应尝试应用样式表而不是使用 setStyle() 方法, 因为据估算, 此方法很昂贵。 仅当要在运行时过程中更改对象的样式时, 才应使用此方法。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml "
    width="150" height="140"
     viewSourceURL="src/StylesSetStyle/index.html"
>
    <mx:Script>
        <![CDATA[
            private function initVBox():void
            {
                myVBox2.setStyle("paddingTop", 12);
                myVBox2.setStyle("paddingBottom", 12);
            }
        ]]>
    </mx:Script>
   
    <mx:VBox borderStyle="solid">
        <mx:Button label="Submit"/>

    </mx:VBox>
    <mx:VBox
        id="myVBox2" borderStyle="solid"
        paddingTop="12" paddingBottom="12"
        initialize="initVBox();"
    >
    <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。