三大Flex佈局用法（轉載）

Flex佈局基礎

對於Flex 初學者，在Hello World以後，Flex佈局即是下一站學習要的要義。如果從傳統的Html轉變而來，總但願找到相似於Div/Table/UL等之類的控件，也但願在 Flex中能夠像Dreamweaver同樣能夠拖拽控件；而若是是從Windows Application程序轉變而來，則可能更喜歡Absolute佈局，讓控件散落於頁面之上，經過x/y控制其座標。這種作法讓Html設計師以爲可 笑，但我見過有人確實用VS這麼作過。

喜歡Div的朋友，可能以爲Box很親切；喜歡用Table的設計師，對不起，Flex沒有Table，Grid雖與之極像，但不宜用來布 局；Application程序員也不要圖行事，使用Absolute佈局，這種佈局不宜開發Web應用，若是隻是開發桌面版則可有可無。

本節寫了三個Demo：

  

◆Absolute佈局

◆Hbox佈局

◆VBox佈局（與前者統稱Box佈局）

若是開發AIR程序或者桌面應用，能夠選擇Absolute佈局；但若是開發Web應用，推薦學習、研究Box佈局。右擊能夠查看源碼。

1、Flex佈局之Absolute

用Flex新建Application時，最下面有一個佈局屬性選項：Vertical,Horizontal,Absolute。意思如單詞。若 選擇Absolute，則Application的子控件依據其{x,y}座標依靠。但不影響第二代子控件，即，若是放一個HBox到該 Application中，HBox中的控件則水平排列。Horizontal與Vertical至關於把Application作爲一個水平或豎向的盒 子(Box)，對子、孫控件的影響關係與Absolute相似。

查看Absolute，不難發現，可視區域的寬度是必定的，不管在何種分辨率下，何種瀏覽器寬度。但在Web應用中，咱們不但願出現這樣的效果。相 反，咱們可能但願控件能夠按照百分比自動調整位置。只此一條，開發Web應用，便不建議使用Absolute佈局。由此便產生了方便、簡單、易用的Box 佈局。

2、Flex佈局之Hbox

HBox讓子控件按水平方向自動排列，居右、居左或居中均可以。

查看Hbox，控件與前者沒有增減，一樣的控件。但它能夠自適應瀏覽器寬度。文章的標題欄部分用了一個HBox，其包涵三個子控 件：Label,Spacer與LinkButton.Spacer的寬度設爲100%，這樣不管Label無多少字符，多寬，均可以把 LinkButton撐到最右邊。一樣，也能夠把它用在VBox中，則設置其高爲100%。Spacer在Box佈局中很是實用。
細心的朋友不難發現，這個Application的layout屬性是Vertical，整個App至關於一個VBox。最下面的評論文本框與按紐也在一個HBox以內。

3、Flex佈局之VBox

VBox讓子控件在豎直方向上排列。top，bottom or center。

查看VBox，這個App的layout是Horiazontal，至關於一個HBox。一級控件是兩個VBox，一左一右。左邊與前面的HBox 對應的部分相似。右邊用Panel與TitleWindow，還有Grid,Tile。Panel與TitleWindow都具備layout屬性，能夠 在其內部放置任何子控件，待遇與Application同。值得一提的是Tile，它可以讓子控件流動延伸，先在x軸上排行，滿了以後再換行。 TileList與其相似。

Grid酷似html中的Table，但差異很大，也不適合作佈局用。實際應用中，也經常使用Tile或TileList代替。Box佈局能夠知足基本的項目應用，但有一些問題。譬如，文章內容要滾動顯示，能不能像Html那樣實現流佈局？答案是能夠的。Box佈局只是基本的佈局方法，並無發揮Flex的長處與優點。關於State與流佈局在稍後。在商業項目開發中，Application99%都使用absolute佈局，中間所用的容器間有box,tile或其它佈局。