flex4的布局

• horizontalAlign: 布局元素的水平对齐方式，可能的值有 "left"、 "center"或 "right"。

• verticalAlign: 布局元素的竖直对齐方式，可能的值有 "top"、 "middle"或 "bottom"。

Flex4相对Flex3在标签上有很大改动，Flex4的布局采用s标签的形式来配置。看下面这个例子：首先对整个面板定义了VerticalLayout（竖直布局），同时水平和竖直都居中，然后在Application容器中定义了一个panel面板，panel面板定义了HorizontalLayout（水平布局），水平对齐方式采用了右对齐的方式。

以下写了三种flex4的布局方式：自动定位，绝对定位，基于容器限制布局

1、自动定位:

垂直布局:

<s:layout>

<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>

</s:layout>

水平布局:

<s:layout>

<s:HorizontalLayout verticalAlign=“middle”horizontalAlign="center"/>

</s:layout>

小例子：

Xml代码  

1. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
2.                xmlns:s="library://ns.adobe.com/flex/spark"   
3.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
4.     <s:layout>  
5.         <s:VerticalLayout horizontalAlign="center"  verticalAlign="middle"/>  
6.     </s:layout>  
7.       
8.     <s:Panel width="30%" height="60" title="panel布局">  
9.         <s:layout>  
10.             <s:HorizontalLayout  verticalAlign="middle" horizontalAlign="right"/>  
11.         </s:layout>  
12.         <s:Button label="按钮1" x="36" y="47"/>  
13.         <s:TextInput/>  
14.     </s:Panel>  
15.       
16.     <s:TextInput text="文本框"/>  
17.     <s:TextArea text="多行文本框"/>  
18. </s:Application>  

 

最后看运行结果：

2.绝对定位

       使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局；否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。使用<s:BasicLayout/>标签表示绝对定位。

下面这个例子使用了据对定位标签，容器内名为“按钮1”的组件未定义坐标则默认放在(0，0)位置，其它组件定义了xy则排放在指定位置。

 

Xml代码   

1. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
2.                xmlns:s="library://ns.adobe.com/flex/spark"   
3.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
4.     <s:layout>  
5.         <s:BasicLayout/>  
6.     </s:layout>  
7.     <s:Button label="按钮1"/>  
8.     <s:Button x="92" y="0" label="按钮2"/>  
9.     <s:TextInput x="0" y="29"/>  
10. </s:Application>  

  

运行效果如下图所示：

3、基于限制的布局

（1）可以定义一个外层组件，然后再在里面写子组件， 在该布局中锚定组件的侧边或中心以相对于组件的容器进行定位。

（2）使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。

使用子组件的 top、 bottom、 left、 right、 horizontalCenter 或 verticalCenter 样式属性来指定限制。

→锚定组件的边缘

（1）Xml代码  

1. <s:Panel x="41" y="27" width="250" height="200">  
2.         <s:Button top="50" bottom="50" left="50" right="50" label="按钮"/>  
3. </s:Panel>  

 

如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小（组件可能被拉伸或压缩）。上例运行结果如下图所示：

 

 

（2）Xml代码  

1. <s:Panel x="41" y="27" width="250" height="200">  
2.     <s:Button horizontalCenter="-50" verticalCenter="-50" label="按钮1"/>  
3.     <s:Button horizontalCenter="0" verticalCenter="-0" label="按钮2"/>  
4.     <s:Button horizontalCenter="50" verticalCenter="50" label="按钮3"/>  
5. </s:Panel>  

 

运行效果如下图所示：