在這一節(jié)將向我們演示如何在Adobe Flex Builder中創(chuàng)建基于約束的布局。當(dāng)用戶調(diào)整程序窗口時，基于約束的布局保證我們用戶界面中的組件進(jìn)行自動調(diào)整。

設(shè)置我們的工程
在我們開始這一節(jié)之前，我們要先完成下面的任務(wù)：
如果我們還沒有創(chuàng)建工程，創(chuàng)建Lessons工程。
確保打開了自動構(gòu)建選項(xiàng)。

了解Flex中的基于約束的布局
當(dāng)用戶調(diào)整一個Flex程序窗口時，我們希望布局中的組件可以進(jìn)行自動調(diào)整。當(dāng)用戶調(diào)整程序窗口時，一個約束的布局可以調(diào)整組件的尺寸和位置。
為了創(chuàng)建一個基于約束的布局，我們必須使用一個容器，而這個容器的layout屬性要設(shè)置為absolute(layout="absolute")。這個屬性給了我們使用absolute位置來設(shè)置組件位置與尺寸的靈活性，同時也提供了當(dāng)容器被調(diào)整時設(shè)置與移動組件的約束的能力。例如，如果我們希望當(dāng)用戶將程序窗口變寬時，一個TextInput文本框可以伸展，我們可以用容器的左右邊界來界定這個控件，這樣文本框的寬度就可以用窗口的寬度來設(shè)定。
在Flex中，所有的約束都是相對于容器的邊界來設(shè)置的。他們不可以相對于其他控件進(jìn)行設(shè)置。現(xiàn)在我們了解了基本的概念，我們可以在Flex Builder中創(chuàng)建一個簡單的布局并且定義約束。

插入與放置組件
創(chuàng)建基于約束的布局的第一步就是要在一個容器中放置組件，這個容器的layout屬性設(shè)置為absolute。這個屬性可以使得我們在這個容器中將組件拖放到任何位置。為了象素點(diǎn)的精度，我們可以設(shè)置X與Y坐標(biāo)。
在這一節(jié)中，我們在簡單的反饋表單中插入并放置組件。

1 在瀏覽視圖中選擇Lessons工程，選擇File>New>MXML Application，創(chuàng)建一個名為Layout.mxml的工程。

2 將Layout.mxml文件設(shè)置為默認(rèn)編譯的文件。

3 在MXML編輯器的設(shè)計模式中，通過從組件視圖中拖放組件來和Layout.mxml文件中添加一個Lable和一個TextInput控件。

4 使用鼠標(biāo)將Label與TextInput控件并肩放置在從容器頂部算起60象素處。
5 在Flex屬性視圖中，擴(kuò)展屬性的Common與Layout類。
出現(xiàn)設(shè)置common與Layout屬性的選項(xiàng)。

如果我們看到一個屬性表而不是前面的樣子，點(diǎn)擊標(biāo)準(zhǔn)視圖按鈕。
1 選擇Label控件并設(shè)置為如下的屬性：
Text: Email
X: 20
Y: 60
2 選擇TextInput控件并設(shè)置為如下的屬性：
X: 90
Y: 60
Width: 300
3 切換到MXML編輯器的代碼模式，Layout.mxml文件應(yīng)包含如下的代碼：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
</mx:Application>

4 添加其余的Flex控件，如下面的代碼所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput x="90" y="60" width="300"/>
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea x="90" y="90" width="300" />
<mx:Button x="330" y="150" label="Send"/>
</mx:Application>
布局預(yù)覽圖如下：

5 保存文件
Flex Builder會編譯這個程序。
6 運(yùn)行程序。
程序的運(yùn)行效果如下圖所示：

7 拖放瀏覽器窗口使得程序窗口變大或變小。
這些組件保持他們相對于窗口左邊與上邊的位置，但是當(dāng)我們調(diào)整瀏覽器窗口時這些組件并不會伸展與壓縮。例如，當(dāng)我們使得瀏覽器窗口變得更窄時，發(fā)送按鈕就會消息，而TextArea與TextInput控件也會部分消失。

下一步就是為這個布局設(shè)置約束，這樣當(dāng)我們調(diào)整程序窗口時這些組件就會自動調(diào)整。
定義布局約束
在我們的布局中放置組件以后，我們定義布局約束，這樣當(dāng)用戶調(diào)整程序窗口時，組件可以自動調(diào)整。
1 在MXML編輯器的設(shè)計模式中，選擇TextInput控件(EMail地址)。
2 在Flex屬性視圖時，確保了屬性的布局類。布局類包含了用于設(shè)置錨點(diǎn)的選項(xiàng)：
3 在這個視圖中通過選擇左和右錨點(diǎn)復(fù)選框來為TextInput控件定義布局約束，然后指定距窗口左邊90,距窗口右邊60,如下圖所示：

這兩個復(fù)選框?qū)extInput控件相對于窗口的左邊與右邊固定在屏幕上。與文本框相關(guān)的數(shù)字指明了控件距離窗體邊框的距離。
左邊界是固定控件所必須的，這樣當(dāng)用戶水平調(diào)整程序窗口時，他會自動擴(kuò)展或壓縮。如果沒有左邊界的定位，控件就會滑向左邊或是右邊。
在MXML代碼中這些約束如下進(jìn)行表式：
<mx:TextInput y="60" left="90" right="60"/>
4 在編輯器的設(shè)計模式中，選擇TextInput控件，在Flex屬性視圖中，選擇四個角的復(fù)選框，并且指定如下的距離：
Left: 90
Right: 60
Top: 90
Bottom: 190
在Flex屬性視圖中，TextArea控件視圖如下：

5 選擇按鈕控件，在Flex屬性視圖中，點(diǎn)擊右與下錨點(diǎn)復(fù)選框，并且指定距右邊界為60,距下邊界為150。如下圖所示：

這兩個復(fù)選框?qū)粹o控件固定在窗口右下角。沒有錨點(diǎn)將控件相對于左邊與上邊固定，當(dāng)用戶調(diào)整程序時，控件就會水平或是垂直進(jìn)行移動。
6 保存文件，當(dāng)編譯完成時運(yùn)行程序。
程序的運(yùn)行結(jié)果如下：