以下資料部分來自 Adobe 中文網(wǎng)，但資料年代已久，根據(jù)我自己的實(shí)驗(yàn)對(duì)部分內(nèi)容進(jìn)行了更新。

?

首先了解一個(gè)基礎(chǔ)定義：容器和組件，組件是button、textInput等用于顯示的基礎(chǔ)控件，容器是用來存放組件的，多個(gè)組件可以放在同一容器中。

Flex的依靠容器來執(zhí)行布局，大多數(shù) Flex 容器使用預(yù)定義的規(guī)則集來自動(dòng)定位您在其內(nèi)定義的所有子組件。Flex 4 容器可以提供一套默認(rèn)的布局：Basic、Horizontal或 Vertical以及能夠基于容器內(nèi)容的默認(rèn)尺寸。有些容器是可植皮的，可以通過在它們的皮膚上添加Spark Scroller對(duì)它們進(jìn)行滾動(dòng)操作。

?

在 Flex 應(yīng)用程序中定位組件的方法有三種 :

? ??? 使用自動(dòng)定位

? ??? 使用絕對(duì)定位

? ??? 使用基于限制的布局

?

• 使用自動(dòng)定位

對(duì)于大多數(shù)容器 , Flex 會(huì)根據(jù)容器的布局規(guī)則 ( 如布局方向、容器填充和容器內(nèi)的組件之間的間隙 ) 自動(dòng)定位容器子級(jí)。對(duì)于使用自動(dòng)定位的容器 , 直接設(shè)置其子組件的 x 或 y 屬性或調(diào)用 move() 方法沒有任何效果 , 或僅有一個(gè)臨時(shí)效果 , 因?yàn)椴季钟?jì)算將組件的位置設(shè)置為一個(gè)計(jì)算的結(jié)果 , 而不是指定的值。

在 Flex4 中自動(dòng)定義使用 <s:HorizontalLayout/> 或 <s:VerticalLayout/> 來定位：使用 HorizontalLayout ，容器內(nèi)的組件會(huì)排放在豎直方向（同一列排放），使用 <s:VerticalLayout/> ，容器內(nèi)的組件會(huì)排放在水平方向（同一行排放）。

可以通過指定容器屬性控制容器內(nèi)組件的布局格式，下列屬性是最常見的 :

? horizontalAlign: 布局元素的水平對(duì)齊方式，可能的值有 "left" 、 "center" 或 "right" 。

? verticalAlign: 布局元素的豎直對(duì)齊方式，可能的值有 "top" 、 "middle" 或 "bottom" 。

Flex4 相對(duì) Flex3 在標(biāo)簽上有很大改動(dòng)， Flex4 的布局采用 s 標(biāo)簽的形式來配置。看下面這個(gè)例子：首先對(duì)整個(gè)面板定義了 VerticalLayout （豎直布局），同時(shí)水平和豎直都居中，然后在 Application 容器中定義了一個(gè) panel 面板， panel 面板定義了 HorizontalLayout （水平布局），水平對(duì)齊方式采用了右對(duì)齊的方式。

?

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"  verticalAlign="middle"/>
	</s:layout>
	
	<s:Panel width="30%" height="60" title="panel布局">
		<s:layout>
			<s:HorizontalLayout  verticalAlign="middle" horizontalAlign="right"/>
		</s:layout>
		<s:Button label="按鈕1" x="36" y="47"/>
		<s:TextInput/>
	</s:Panel>
	
	<s:TextInput text="文本框"/>
	<s:TextArea text="多行文本框"/>
</s:Application>

  

?

最后看運(yùn)行結(jié)果：

• 使用絕對(duì)定位 ?

使用絕對(duì)定位 , 你通過使用其 x 和 y 屬性來指定子控件的位置 , 或者指定基于限制的布局；否則 , Flex 會(huì)將該子級(jí)置于父容器的位置 0,0 處。 當(dāng)您指定 x 和 y 坐標(biāo)時(shí) , 僅當(dāng)您更改這些屬性值時(shí) , Flex 才會(huì)重新定位控件。使用 <s:BasicLayout/> 標(biāo)簽表示絕對(duì)定位。

下面這個(gè)例子使用了據(jù)對(duì)定位標(biāo)簽，容器內(nèi)名為“按鈕 1 ”的組件未定義坐標(biāo)則默認(rèn)放在 (0 ， 0) 位置，其它組件定義了 xy 則排放在指定位置。

?

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:Button label="按鈕1"/>
	<s:Button x="92" y="0" label="按鈕2"/>
	<s:TextInput x="0" y="29"/>
</s:Application>

  

??

運(yùn)行效果如下圖所示：

?

• 使用基于限制的布局

您可以通過使用基于限制的布局同時(shí)管理子組件大小和定位子組件 , 在該布局中您錨定組件的側(cè)邊或中心以相對(duì)于組件的容器進(jìn)行定位。

您可以使用基于限制的布局來確定支持絕對(duì)定位的任何容器的即時(shí)子級(jí)的位置和大小。

您通過使用子組件的 top 、 bottom 、 left 、 right 、 horizontalCenter 或 verticalCenter 樣式屬性來指定限制。

→錨定組件的邊緣

您可以將組件的一個(gè)或多個(gè)邊緣錨定在其容器的相應(yīng)邊緣的某個(gè)像素偏移處。 當(dāng)容器調(diào)整

大小時(shí) , 錨定的子級(jí)邊緣保持與父級(jí)邊緣的距離相同。

top 、 bottom 、 left 和 right 樣式屬性指定組件側(cè)邊與相應(yīng)的容器側(cè)邊之間的距離 ( 以像素計(jì) ) 。比如 top ，表示組件的上邊界離容器上邊界的像素距離。注意：所有錨定屬性的值必須為整數(shù)，不能是 ”100px” 之類的。

如下例所示，在一個(gè) panel 容器中放入一個(gè) button ，指定上下左右的錨點(diǎn)都是 50 像素：

?

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

  

?

如果在一個(gè)方向中錨定兩個(gè)邊 , 如頂邊和底邊 , 則在調(diào)整容器大小時(shí) , 也會(huì)調(diào)整組件大小（組件可能被拉伸或壓縮）。上例運(yùn)行結(jié)果如下圖所示：

?

→錨定組件的中心

您還可以將某個(gè)子組件的水平或垂直中心 ( 或全部?jī)烧? ) 錨定在容器中心的某個(gè)像素偏移處。除非您同時(shí)使用基于百分比的大小調(diào)整 , 否則該子級(jí)不會(huì)在指定的尺寸內(nèi)調(diào)整大小。

horizontalCenter 和 verticalCenter 樣式指定在指定的方向上組件的中心點(diǎn)與容器的中心之間的距離（以像素計(jì)）；一個(gè)負(fù)數(shù)會(huì)從中心向左或向上移動(dòng)組件。

下面的示例定義了一個(gè) panel 容器，容器中放有三個(gè) button ，中心錨點(diǎn)位置都不同：

?

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

  

?

運(yùn)行效果如下圖所示：

?

以上三種布局方式可以混合使用，以達(dá)到最終目的。

不過有些規(guī)則需要注意：不要使用 verticalCenter 樣式屬性指定 top 或 bottom 樣式屬性 , verticalCenter 值會(huì)覆蓋其他屬性。類似地，不要使用 horizontalCenter 樣式屬性指定 left 或 right 樣式屬性。

由基于限制的布局確定的大小會(huì)覆蓋任何顯式或基于百分比的大小規(guī)范。例如，如果您指定 left 和 right 樣式屬性，產(chǎn)生的基于限制的寬度會(huì)覆蓋由 width 或 percentWidth 屬性設(shè)置的任何寬度。

?

最后，給出需要牢記的若干通用技巧：

• 總體來說，? 應(yīng)該選擇使用限制條件 ?而不選擇具有（x,y）值的絕對(duì)定位方式，因?yàn)橄拗茥l件可以動(dòng)態(tài)地調(diào)整瀏覽器的大小。 當(dāng)為web、桌面、手機(jī)和平板電腦設(shè)備開發(fā)跨平臺(tái)的應(yīng)用程序時(shí)，這一點(diǎn)更為重要，因?yàn)檫@些設(shè)備的屏幕尺寸變化較大。
• 一般來說，可以將? left/right ?用于大小調(diào)整目的，而將? horizontalCenter ?和 verticalCenter ?用于定位目的。
• 對(duì)于一般居中定位目的，特別是當(dāng)啟動(dòng)最小尺寸窗口并且你希望對(duì)一個(gè)對(duì)象進(jìn)行居中定位時(shí)，可以使用horizontalCenter。

?

• 容器滾動(dòng)條設(shè)置

容器用來裝載組件等內(nèi)容，如果容器內(nèi)組件過多可能會(huì)造成內(nèi)容過長(zhǎng)過寬等情況，所以我們會(huì)考慮使用滾動(dòng)條來固定容器長(zhǎng)寬。

在Flex 3中，滾動(dòng)功能內(nèi)置于組件；而在 Flex 4中，該功能的實(shí)現(xiàn)方式不同。對(duì)Group 容器以及 Hgroup、Vgroup和 DataGroup 容器進(jìn)行滾動(dòng)操作的最佳方法是在一個(gè)Spark Scroller對(duì)象中包裝容器。 關(guān)鍵之處是將Scroller的寬度和高度設(shè)置為你希望查看內(nèi)容的尺寸。你也可以設(shè)置滾動(dòng)位置以便在相應(yīng)范圍的當(dāng)前位置顯示內(nèi)容。

Scroller屬性：

horizontalScrollPolicy：水平方向是否顯示滾動(dòng)條（auto：自動(dòng)如果超出范圍才顯示，on：一直顯示，off：一直不顯示）

verticalScrollPolicy：豎直方向是否顯示滾動(dòng)條（auto：自動(dòng)如果超出范圍才顯示，on：一直顯示，off：一直不顯示）

下面例子，在panel中添加一個(gè)group并且設(shè)置滾動(dòng)條：

?

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="300" minHeight="300" >
	<s:Panel x="41" y="27" width="250" height="200" >
		<s:Scroller width="100%" height="100%">
		<s:Group>
			<s:layout>
				<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
			</s:layout>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
			<s:Button label="按鈕"/>
		</s:Group>
		</s:Scroller>
	</s:Panel>
</s:Application>
  

?運(yùn)行結(jié)果如下圖所示：

?需要注意的是：< s:Scroller>內(nèi)只支持繼承自group的容器。

?

?

?

?

最后附上一份精彩文章： Flex4容器使用的若干技巧

Flex4基礎(chǔ)-組件定位和容器布局