很好的文章
Flex3 界面布局教程 (1)
http://www.dbjr.com.cn/article/20349.htm
Flex3 界面布局教程 (2)
http://www.dbjr.com.cn/article/20350.htm
Flex 組件的定位和布局
http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/
Using Layout Containers
http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_07.html

基本上看完前三篇，這方面就能搞得很好了；最后一篇是官方的關(guān)于布局容易的手冊(cè)，有空的時(shí)候看看，可以了解更多細(xì)節(jié)。下面開(kāi)始分享我的學(xué)習(xí)筆記（有潤(rùn)色），內(nèi)容沒(méi)有脫離上面的四篇文章，沒(méi)興趣的朋友可以跳過(guò)不看了。

定位模式
要想弄明白 flex 的界面布局，就有必要先弄明白它的定位模式。 flex 的自由之處在于你可以在 mxml 里寫(xiě)上許多定位模式的代碼，當(dāng)這些定屬性發(fā)生沖突時(shí)，它會(huì)自動(dòng)根據(jù)優(yōu)先級(jí)來(lái)執(zhí)行優(yōu)先級(jí)最高的定屬性。你不用擔(dān)心記不住這些優(yōu)先級(jí)， flex 這個(gè) IDE 在檢測(cè)到?jīng)_突時(shí)，會(huì)在 problem 框里顯示一個(gè)警告，這樣你可以去掉優(yōu)先級(jí)比較低的定位屬性了。

眾多的定位模式中第一個(gè)是絕對(duì)模式，即你通過(guò)確定的數(shù)值來(lái)設(shè)定 x 、 y 、 width 和 height 屬性；使用絕對(duì)模式你需要知道你的控件擺在哪個(gè)位置和確定它的大小，顯然地這很難讓你的客戶方便地獲得適應(yīng)客戶屏幕和習(xí)慣的布局，所以我們更常用的是自動(dòng)定位；自動(dòng)定位仍然不夠靈活，這時(shí)我們可以使用基于約束的布局，顧名思義，這是一種通過(guò)描述其與容器的關(guān)系來(lái)實(shí)現(xiàn)布局的方法，通過(guò)使用子組件的 top 、 bottom 、 left 、 right 、 horizontalCenter 或 verticalCenter 樣式屬性來(lái)指定限制。關(guān)于這方面的更多內(nèi)容，可以通過(guò)上面推薦的第三篇文章來(lái)了解。

HBox 、VBox 和 Spacer
這兩個(gè) Box 類是“看不見(jiàn)”的控件，用來(lái)約束其中的組件布局。如果你用過(guò) wxWidgets 那一定對(duì)它們相當(dāng)熟悉了，這種基于 Box 的布局方法加上約束屬性，可以很容易地做出隨著父控件的大小變化而相應(yīng)地保持比例的變化，唉啊，想起當(dāng)年用 MFC 實(shí)現(xiàn)這樣的效果，我寫(xiě)了多少代碼，調(diào)試了多少個(gè)夜晚??！

在 Box 控件中，某兩個(gè)控件之間的距離由 verticalGap 屬性設(shè)定，默認(rèn)值并不是 0 ，所以如果你想把兩個(gè)控件緊挨在一起，需要手動(dòng)把它設(shè)置為 0 ；如果你想單獨(dú)地調(diào)整某兩個(gè)控件間的間隔，那么可以使用“看不見(jiàn)的看得見(jiàn)的”控件 Spacer 來(lái)隔開(kāi)它， Spacer 在界面上顯示為一個(gè)純透明的組件，所以看不見(jiàn)，但又能起到空白的作用，所以又看得見(jiàn)，它的 width 和 height 屬性可以相對(duì)應(yīng)地讓 HBox 和 VBox 控制的組件更加漂亮。

ApplicationControlBar
如果你用 Win32 SDK 或 MFC 界面編程的經(jīng)歷，你一定為“在工具欄上加一個(gè) ComboBox 或 Edit 的需求”而抓狂過(guò)吧？現(xiàn)在不用怕了，來(lái)到 flex 的世界，像這種問(wèn)題，用 ApplicationControlBar 是相當(dāng)相當(dāng)?shù)匦?case ?？纯聪旅孢@個(gè)圖多復(fù)雜，用了它，就是一個(gè) 1 + 1 = 2 的小 case 了。 
  
DividedBox 、HDividedBox 和 VDividedBox
別說(shuō)是用 MFC ，哪怕是用 wxWidgets ，做一個(gè)可以隨時(shí)拖放改變切分比例的分割組件也是困難的，但到了 Flex 的時(shí)代，一切都變得非常容易了，使用 DividedBox 及其子類可以像使用 Box 及其子類那樣方便地分割組件，下面就是一個(gè)活生生的例子，拖動(dòng)中間的分隔條，可以隨時(shí)改變大小比例。、
 
除了這些以外，還有最常用的容器 Canvas 、 ApplicationControlBar 的基類 ControlBar 、很有 web 特色的 Form, FormHeading, and FormItem 、與 Box 類似的 Grid 、以及 Panel 、 Tile 和 TitleWindow ，這些類都可以在手冊(cè)里看到，還是那句話：有空的時(shí)候， read the fucking manuals ；工作的時(shí)候， google is your friend 。

最新評(píng)論