Flex应用的排版布局——How Flex Works（四）

我们来详尽阐述一下先前那个Say Hello to Flex的例子，如下所示，您可以通过混合使用组件和其属性来控制Flex应用程序的布局。

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Panel layout="absolute" width="80%" height="80%"
> 
        <mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30"
/> 
        <mx:Button label="Close" right="30" bottom="40"
/> 
    </mx:Panel> 
</mx:Application> 

一些个容器组件允许来创建绝对布局，意味着您可以按照精确的横坐标和纵坐标放置其他组件。您还可以相对于上级容器组件的边界放置子组件，甚至可以在应用程序缩小或放大的时候限制子组件保持其相对位置。

这个例子中，控制板组件的布局属性设置为“绝对的”，容器的总体大小设为应用大小的80%。两个控制组件（TextArea 和 Button）位于距离控制板容器的边界指定像素的位置。

使用样式和主题进行视觉设计

如果样式属性未被指定，整个应用的就会采用一个主题，默认情况下，是Halo主题（见上图例子）。然而，您也可以修改默认主题或创建您自己的主题。如下所示，您还能简易地通过指定新的样式定义来使默认主题失效。

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 

    <mx:Style> 

        TextArea { 

        font-size: 36px; 

        font-weight: bold;

        } 

    </mx:Style> 


    <mx:Panel layout="absolute" width="80%" height="80%" x="122" y="24"> 
        <mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30"/> 
        <mx:Button label="Close" right="30" bottom="40"/> 
    </mx:Panel> 
</mx:Application>

通过明确定义TextArea组件的样式，应用程序现在如下所示：

这个例子中，样式是使用<mx:Style>标签在MXML中确定的。如前所提到的，您还可以通过修改主题、应用新主题及使用外部CSS文件（引用到MXML文件中来）、设定独立的样式属性来设定样式。

在MXML文件中引用层叠样式表的方式，就是添加如下代码：

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

更多的信息请参考：

• Create a Constraint-based Layout in Getting Started with Flex 2
• Using Layout Containers in Flex 2 Developer’s Guide
• Using Styles and Themes in Flex 2 Developer’s Guide