本文和大家重點(diǎn)學(xué)習(xí)一下Flex布局的一些基礎(chǔ)知識(shí)，對(duì)于Flex 初學(xué)者，在Hello World之后，F(xiàn)lex布局便是下一站學(xué)習(xí)要的要義。

Flex布局基礎(chǔ)

本節(jié)僅針對(duì)Flex初學(xué)者，有一定布局經(jīng)驗(yàn)者請(qǐng)略過(guò)本節(jié)。學(xué)習(xí)本節(jié)的***方法，先瀏覽一遍Demo，查看下載源碼，動(dòng)手實(shí)踐一下。

對(duì)于Flex 初學(xué)者，在Hello World之后，F(xiàn)lex布局便是下一站學(xué)習(xí)要的要義。若是從傳統(tǒng)的Html轉(zhuǎn)變而來(lái)，總希望找到類似于Div/Table/UL等之類的控件，也希望在Flex中可以像Dreamweaver一樣可以拖拽控件；而如果是從Windows Application程序轉(zhuǎn)變而來(lái)，則可能更喜歡Absolute布局，讓控件散落于頁(yè)面之上，通過(guò)x/y控制其坐標(biāo)。這種做法讓Html設(shè)計(jì)師覺(jué)得可笑，但我見(jiàn)過(guò)有人確實(shí)用VS這么做過(guò)。

喜歡Div的朋友，可能覺(jué)得Box很親切；喜歡用Table的設(shè)計(jì)師，對(duì)不起，F(xiàn)lex沒(méi)有Table，Grid雖與之極像，但不宜用來(lái)布局；Application程序員也不要圖行事，使用Absolute布局，這種布局不宜開(kāi)發(fā)Web應(yīng)用，如果只是開(kāi)發(fā)桌面版則無(wú)關(guān)緊要。

本節(jié)寫了三個(gè)Demo：

◆Absolute布局

◆Hbox布局

◆VBox布局（與前者統(tǒng)稱Box布局）

如果開(kāi)發(fā)AIR程序或者桌面應(yīng)用，可以選擇Absolute布局；但如果開(kāi)發(fā)Web應(yīng)用，推薦學(xué)習(xí)、研究Box布局。右擊可以查看源碼。

一，Absolute布局

用Flex布局新建Application時(shí)，最下面有一個(gè)布局屬性選項(xiàng)：Vertical,Horizontal,Absolute。意思如單詞。若選擇Absolute，則Application的子控件依據(jù)其{x,y}坐標(biāo)依靠。但不影響第二代子控件，即，如果放一個(gè)HBox到該Application中，HBox中的控件則水平排列。Horizontal與Vertical相當(dāng)于把Application做為一個(gè)水平或豎向的盒子(Box)，對(duì)子、孫控件的影響關(guān)系與Absolute類似。

查看Absolute，不難發(fā)現(xiàn)，可視區(qū)域的寬度是一定的，無(wú)論在何種分辨率下，何種瀏覽器寬度。但在Web應(yīng)用中，我們不希望出現(xiàn)這樣的效果。相反，我們可能希望控件可以按照百分比自動(dòng)調(diào)整位置。只此一條，開(kāi)發(fā)Web應(yīng)用，便不建議使用Absolute布局。由此便產(chǎn)生了方便、簡(jiǎn)單、易用的Box布局。

二，Hbox布局

Flex布局中HBox讓子控件按水平方向自動(dòng)排列，居右、居左或居中都可以。

查看Hbox，控件與前者沒(méi)有增減，同樣的控件。但它可以自適應(yīng)瀏覽器寬度。文章的標(biāo)題欄部分用了一個(gè)HBox，其包涵三個(gè)子控件：Label,Spacer與LinkButton.Spacer的寬度設(shè)為100%，這樣無(wú)論Label無(wú)多少字符，多寬，都可以把LinkButton撐到最右邊。同樣，也可以把它用在VBox中，則設(shè)置其高為100%。Spacer在Box布局中非常實(shí)用。
細(xì)心的朋友不難發(fā)現(xiàn)，這個(gè)Application的layout屬性是Vertical，整個(gè)App相當(dāng)于一個(gè)VBox。最下面的評(píng)論文本框與按紐也在一個(gè)HBox之內(nèi)。

三，VBox布局

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

查看VBox，這個(gè)App的layout是Horiazontal，相當(dāng)于一個(gè)HBox。一級(jí)控件是兩個(gè)VBox，一左一右。左邊與前面的HBox對(duì)應(yīng)的部分類似。右邊用Panel與TitleWindow，還有Grid,Tile。Panel與TitleWindow都具有l(wèi)ayout屬性，可以在其內(nèi)部放置任何子控件，待遇與Application同。值得一提的是Tile，它可讓子控件流動(dòng)延伸，先在x軸上排行，滿了之后再換行。TileList與其類似。

Grid酷似html中的Table，但差別很大，也不適合做布局用。實(shí)際應(yīng)用中，也常用Tile或TileList代替。
Box布局可以滿足基本的項(xiàng)目應(yīng)用，但有一些問(wèn)題。譬如，文章內(nèi)容要滾動(dòng)顯示，能不能像Html那樣實(shí)現(xiàn)流布局？答案是可以的。Box布局只是基本的布局方法，并沒(méi)有發(fā)揮Flex的長(zhǎng)處與優(yōu)勢(shì)。關(guān)于State與流布局在稍后。
在商業(yè)項(xiàng)目開(kāi)發(fā)中，Application99%都使用absolute布局，中間所用的容器間有box,tile或其它布局。

【編輯推薦】

1. 解析Flex布局容器的使用
2. Flex基礎(chǔ) 創(chuàng)建***個(gè)Flex項(xiàng)目
3. 解析Flex事件執(zhí)行流程
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件