Flex 組件的定位和佈局

在 Flex 應用程序中定位組件的方法有三種:
? 使用自動定位
? 使用絕對定位
? 使用基於限制的佈局

使用自動定位

對於使用自動定位的容器, 直接設置其子組件的 x 或 y 屬性或調用 move() 方法沒有任何效果

能夠經過指定容器屬性控制佈局
layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。當設置爲 "horizontal"時,容器會將其子級佈局在一行內。 當設置爲 "vertical"時, 容器會將其子級佈局在一列內。 有關 "absolute" 設置的信息, 請參閱絕對定位和基於限制的佈局上的部分。
? horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
? verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">//ju zhong xian shi
<mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label id="myLabel" width="180" fontWeight="bold" x="500">
</mx:Label>
<mx:Button label="button1" click="changeText(event);">
</mx:Button>
<mx:Button label="button2" click="myLabel.text='First Flex Application ~~~~~~'">    
</mx:Button>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function changeText(event:MouseEvent):void{
myLabel.text="First Flex Application";
}
]]>
</mx:Script>
</mx:Application>

使用絕對定位

有三個容器支持絕對定位:
? 若是您將 layout 屬性指定爲 "absolute", 則 Application 和 Panel 控件使用絕對定位。
? Canvas 容器始終使用絕對定位。

使用絕對定位, 你經過使用其 x 和 y 屬性來指定子控件的位置, 或者指定基於限制的佈局;不然, Flex 會將該子級置於父容器的位置 0,0 處。 當您指定 x 和 y 座標時, 僅當您更改這些屬性值時, Flex 纔會從新定位控件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
<mx:Panel title="My Application" layout="absolute" paddingTop="10">
<mx:Label id="myLabel" width="180" fontWeight="bold" x="500">
</mx:Label>
<mx:Button label="button1" click="changeText(event);" x="10">
</mx:Button>
<mx:Button label="button2" click="myLabel.text='First Flex Application ~~~~~~'" x="90">    
</mx:Button>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function changeText(event:MouseEvent):void{
myLabel.text="First Flex Application";
}
]]>
</mx:Script>
</mx:Application>

使用基於限制的佈局

在該佈局中您錨定組件的側邊或中心以相對於組件的容器進行定位。top、 bottom、 left 和 right 樣式屬性指定組件側邊與相應的容器側邊之間的距離 
<mx:Panel title="My Application" layout="absolute" width="300" height="130">
<mx:Button id="myButton" label="Button" right="10" bottom="10"/>
</mx:Panel>

錨定組件的中心

horizontalCenter 和 verticalCenter 樣式指定在指定的方向上組件的中心點與容器的中心之間
的距離;一個負數會從中心向左或向上移動組件。
<mx:Panel title="My Application" layout="absolute" width="300" height="130">
<mx:Button id="myButton" label="Button" horizontalCenter="0" verticalCenter="20">
</mx:Button>
</mx:Panel>