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

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

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

插入與放置組件
創(chuàng)建基于約束的布局的第一步就是要在一個(gè)容器中放置組件，這個(gè)容器的layout屬性設(shè)置為absolute。這個(gè)屬性可以使得我們?cè)谶@個(gè)容器中將組件拖放到任何位置。為了象素點(diǎn)的精度，我們可以設(shè)置X與Y坐標(biāo)。
在這一節(jié)中，我們?cè)诤唵蔚姆答伇韱沃胁迦氩⒎胖媒M件。

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

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

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

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

如果我們看到一個(gè)屬性表而不是前面的樣子，點(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會(huì)編譯這個(gè)程序。
6 運(yùn)行程序。
程序的運(yùn)行效果如下圖所示：

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

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

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

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

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