在這一節將向我們演示如何在Adobe Flex Builder中創建基于約束的布局。當用戶調整程序窗口時,基于約束的布局保證我們用戶界面中的組件進行自動調整。
設置我們的工程
在我們開始這一節之前,我們要先完成下面的任務:
如果我們還沒有創建工程,創建Lessons工程。
確保打開了自動構建選項。
了解Flex中的基于約束的布局
當用戶調整一個Flex程序窗口時,我們希望布局中的組件可以進行自動調整。當用戶調整程序窗口時,一個約束的布局可以調整組件的尺寸和位置。
為了創建一個基于約束的布局,我們必須使用一個容器,而這個容器的layout屬性要設置為absolute(layout="absolute")。這個屬性給了我們使用absolute位置來設置組件位置與尺寸的靈活性,同時也提供了當容器被調整時設置與移動組件的約束的能力。例如,如果我們希望當用戶將程序窗口變寬時,一個TextInput文本框可以伸展,我們可以用容器的左右邊界來界定這個控件,這樣文本框的寬度就可以用窗口的寬度來設定。
在Flex中,所有的約束都是相對于容器的邊界來設置的。他們不可以相對于其他控件進行設置。現在我們了解了基本的概念,我們可以在Flex Builder中創建一個簡單的布局并且定義約束。
插入與放置組件
創建基于約束的布局的第一步就是要在一個容器中放置組件,這個容器的layout屬性設置為absolute。這個屬性可以使得我們在這個容器中將組件拖放到任何位置。為了象素點的精度,我們可以設置X與Y坐標。
在這一節中,我們在簡單的反饋表單中插入并放置組件。
1 在瀏覽視圖中選擇Lessons工程,選擇File>New>MXML Application,創建一個名為Layout.mxml的工程。
2 將Layout.mxml文件設置為默認編譯的文件。

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

4 使用鼠標將Label與TextInput控件并肩放置在從容器頂部算起60象素處。
5 在Flex屬性視圖中,擴展屬性的Common與Layout類。
出現設置common與Layout屬性的選項。

如果我們看到一個屬性表而不是前面的樣子,點擊標準視圖按鈕。

1 選擇Label控件并設置為如下的屬性:
Text: Email
X: 20
Y: 60
2 選擇TextInput控件并設置為如下的屬性:
X: 90
Y: 60
Width: 300
3 切換到MXML編輯器的代碼模式,Layout.mxml文件應包含如下的代碼:
<?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>
布局預覽圖如下:
<?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>
布局預覽圖如下:

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

下一步就是為這個布局設置約束,這樣當我們調整程序窗口時這些組件就會自動調整。
定義布局約束
在我們的布局中放置組件以后,我們定義布局約束,這樣當用戶調整程序窗口時,組件可以自動調整。
1 在MXML編輯器的設計模式中,選擇TextInput控件(EMail地址)。
2 在Flex屬性視圖時,確保了屬性的布局類。布局類包含了用于設置錨點的選項:

3 在這個視圖中通過選擇左和右錨點復選框來為TextInput控件定義布局約束,然后指定距窗口左邊90,距窗口右邊60,如下圖所示:

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

更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
