在學(xué)習(xí)FlexBuilder的過程中，你可能會(huì)遇到Flex Builder布局和導(dǎo)航方面的問題，這里和大家分享一下，Container類是所有Flex容器類的基本類。擴(kuò)展Container類的容器添加它們自己的功能以進(jìn)行子組件布局。

Flex Builder布局和導(dǎo)航

容器定義了FlashPlayer的繪圖表面的一個(gè)矩形區(qū)域。子容器包括控件和容器。Container類是所有Flex容器類的基本類。擴(kuò)展Container類的容器添加它們自己的功能以進(jìn)行子組件布局。Application容器是的Flex應(yīng)用程序的唯一根部容器,代表整個(gè)FlashPlayer繪圖表面。

1、Flex Builder布局容器:

使用布局容器可進(jìn)行用戶界面布局。

A,面板(Panel)容器顯示一個(gè)標(biāo)題欄、一個(gè)標(biāo)題、一個(gè)邊框及其子級(jí)。默認(rèn)情況下,Panel容器會(huì)對(duì)子組件進(jìn)行垂直布局,并且可以通過將布局屬性設(shè)置為"absolute"或"horizontal"來(lái)覆蓋此設(shè)置。

B,HDividedBox容器對(duì)子組件進(jìn)行水平布局,除了在子級(jí)之間插入一個(gè)可調(diào)整的分割線之外,它與HBox容器很相似。VDividedBox容器對(duì)子組件進(jìn)行垂直布局,而且也在子級(jí)之間插入一個(gè)可調(diào)整的分割線。

C,平鋪(Tile)容器以多行或多列的形式排列其子級(jí)。

D,表單(Form)容器以標(biāo)準(zhǔn)的表單格式排列其子級(jí)。

E,ApplicationControlBar容器容納提供全局導(dǎo)航和應(yīng)用程序命令的組件,并可以?？吭贏pplication容器的上邊緣。

F,ControlBar容器將控件置于Panel或TitleWindow容器的下邊緣。

G,另外可使用Spacer控件來(lái)輔助布局。Spacer控件并非容器，而是基于百分比的可用于擠占留空以準(zhǔn)確定位的一個(gè)不可見控件。

2、Flex Builder導(dǎo)航容器:

使用導(dǎo)航容器可以控制其他容器的多個(gè)子級(jí)之間的用戶移動(dòng)或?qū)Ш?。Flex Builder導(dǎo)航器容器不能直接嵌套控件，只能嵌套容器。

A，手風(fēng)琴(Accordion)容器定義一個(gè)子面板序列,但一次僅顯示一個(gè)面板。若要導(dǎo)航容器,用戶會(huì)單擊與他們需要訪問的子面板相對(duì)應(yīng)的導(dǎo)航按鈕。使用Accordion容器,用戶可以按任何順序訪問子面板以在表單中前后移動(dòng)。

B,TabNavigator容器創(chuàng)建和管理一組選項(xiàng)卡,使用它們可在其子級(jí)中間導(dǎo)航。TabNavigator容器的子級(jí)是其他容器。TabNavigator容器為每個(gè)子級(jí)創(chuàng)建一個(gè)選項(xiàng)卡。當(dāng)用戶選中某個(gè)選項(xiàng)卡時(shí),TabNavigator容器會(huì)顯示相關(guān)聯(lián)的子級(jí)。

C,ViewStack容器由彼此堆疊在一起的子容器的一個(gè)集合組成,一次只有一個(gè)容器是可見的或活動(dòng)的。ViewStack容器不為用戶定義切換當(dāng)前活動(dòng)容器的內(nèi)置機(jī)制；您必須使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中構(gòu)建邏輯讓用戶來(lái)更改當(dāng)前活動(dòng)的子級(jí)。

3、使用容器Containers進(jìn)行定位Flex Builder布局

定位方式有三種:

A,自動(dòng)定位:多數(shù)Flex容器使用默認(rèn)預(yù)定義的規(guī)則來(lái)自動(dòng)定位你在其中定義的所有的子組件。

B,使用絕對(duì)定位:用于使控件重疊

C,使用基于約束的布局:可以錨定容器的邊緣或者中心點(diǎn)，然后控件就會(huì)隨著容器的伸縮而伸縮

Canvas容器，和layout屬性為absolute的Application或Panel容器才能進(jìn)行絕對(duì)定位，或約束布局。

4、使用視圖狀態(tài)(或ViewStack導(dǎo)航容器)進(jìn)行用戶界面切換導(dǎo)航

可以為一個(gè)Flex程序或組件定義幾種視圖狀態(tài)，然后通過改變(切換)視圖狀態(tài)而改變用戶界面。(ViewStack導(dǎo)航容器可實(shí)現(xiàn)同樣效果)

1)，設(shè)計(jì)基礎(chǔ)狀態(tài)(Basestate,Start,currentState=''):就是在默認(rèn)狀態(tài)下設(shè)計(jì)用戶界面。

2)，設(shè)計(jì)視圖狀態(tài)(currentState='SomeState'):在設(shè)計(jì)模式中，在狀態(tài)查看（Window>States）上點(diǎn)擊新狀態(tài)/NewState按鈕。然后在此狀態(tài)下編輯的界面即為該視圖的對(duì)應(yīng)界面。

3)，創(chuàng)建用戶行為切換控件:定義用戶變換狀態(tài)的點(diǎn)擊事件處理器。一般是使用一個(gè)LinkButtun，激活currentState='SomeState'以切換到某界面，激活currentState=''以回到默認(rèn)界面。
 

【編輯推薦】

1. Flex頁(yè)面跳轉(zhuǎn)實(shí)現(xiàn)的幾種方式
2. FlexBuilder4十大新特性閃亮登場(chǎng)
3. Flex框架中Cairngorm和Mate的優(yōu)點(diǎn)大比拼
4. FlexBuilder3.0與Eclipse3.4的***結(jié)合
5. 解析Flex應(yīng)用開發(fā)步驟 新特性和技術(shù)框架