Flex 3 版面配置容器學習筆記 整理

很好的文章
Flex3 介面布局教程 (1)
http://www.jb51.net/article/20349.htm
Flex3 介面布局教程 (2)
http://www.jb51.net/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

基本上看完前三篇，這方面就能搞得很好了；最後一篇是官方的關於布局容易的手冊，有空的時候看看，可以瞭解更多細節。下面開始分享我的學習筆記（有潤色），內容沒有脫離上面的四篇文章，沒興趣的朋友可以跳過不看了。

定位元模式
要想弄明白 flex 的介面布局，就有必要先弄明白它的定位元模式。 flex 的自由之處在於你可以在 mxml 裡寫上許多定位元模式的代碼，當這些定屬性發生衝突時，它會自動根據優先順序來執行優先順序最高的定屬性。你不用擔心記不住這些優先順序， flex 這個 IDE 在檢測到衝突時，會在 problem 框裡顯示一個警告，這樣你可以去掉優先順序比較低的定位屬性了。

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

HBox 、VBox 和 Spacer
這兩個 Box 類是“看不見”的控制項，用來約束其中的組件布局。如果你用過 wxWidgets 那一定對它們相當熟悉了，這種基於 Box 的布局方法加上約束屬性，可以很容易地做出隨著父控制項的大小變化而相應地保持比例的變化，唉啊，想起當年用 MFC 實現這樣的效果，我寫了多少代碼，調試了多少個夜晚啊！

在 Box 控制項中，某兩個控制項之間的距離由 verticalGap 屬性設定，預設值並不是 0 ，所以如果你想把兩個控制項緊挨在一起，需要手動把它設定為 0 ；如果你想單獨地調整某兩個控制項間的間隔，那麼可以使用“看不見的看得見的”控制項 Spacer 來隔開它， Spacer 在介面上顯示為一個純透明的組件，所以看不見，但又能起到空白的作用，所以又看得見，它的 width 和 height 屬性可以相對應地讓 HBox 和 VBox 控制的組件更加漂亮。

ApplicationControlBar
如果你用 Win32 SDK 或 MFC 介面編程的經曆，你一定為“在工具列上加一個 ComboBox 或 Edit 的需求”而抓狂過吧？現在不用怕了，來到 flex 的世界，像這種問題，用 ApplicationControlBar 是相當相當地小 case 。看看下面這個圖多複雜，用了它，就是一個 1 + 1 = 2 的小 case 了。

DividedBox 、HDividedBox 和 VDividedBox
別說是用 MFC ，哪怕是用 wxWidgets ，做一個可以隨時拖放改變切分比例的分割組件也是困難的，但到了 Flex 的時代，一切都變得非常容易了，使用 DividedBox 及其子類可以像使用 Box 及其子類那樣方便地分割組件，下面就是一個活生生的例子，拖動中間的分隔條，可以隨時改變大小比例。、

除了這些以外，還有最常用的容器 Canvas 、 ApplicationControlBar 的基類 ControlBar 、很有 web 特色的 Form, FormHeading, and FormItem 、與 Box 類似的 Grid 、以及 Panel 、 Tile 和 TitleWindow ，這些類都可以在手冊裡看到，還是那句話：有空的時候， read the fucking manuals ；工作的時候， google is your friend 。