在學(xué)習(xí)Flex的過(guò)程中，你可能會(huì)遇到Flex布局容器的使用的問(wèn)題，這里和大家分享一下，AdobeFlex提供范圍廣泛的容器,從簡(jiǎn)單的框到面板和表單,到在子容器之間提供內(nèi)置導(dǎo)航的元素(如折疊式導(dǎo)航器或選項(xiàng)卡式導(dǎo)航器)。

Flex布局容器的使用

使用容器

容器定義Adobe?Flash?Player的繪圖表面的一個(gè)矩形區(qū)域。在容器內(nèi),可以定義希望出現(xiàn)在容器內(nèi)的組件,包括控件和容器。在容器內(nèi)定義的組件稱(chēng)為容器的子級(jí)。AdobeFlex提供范圍廣泛的容器,從簡(jiǎn)單的框到面板和表單,到在子容器之間提供內(nèi)置導(dǎo)航的元素(如折疊式導(dǎo)航器或選項(xiàng)卡式導(dǎo)航器)。

Container類(lèi)是所有Flex容器類(lèi)的基本類(lèi)。擴(kuò)展Container類(lèi)的容器添加它們自己的功能以進(jìn)行子組件布局。

在Flex應(yīng)用程序的根部是稱(chēng)為Application容器的單一容器,它代表整個(gè)FlashPlayer繪圖表面。此Application容器容納所有其他容器和組件。

提示:不同的容器支持不同的布局規(guī)則,包括automatic和absolute定位。關(guān)于這一點(diǎn)的詳細(xì)信息,請(qǐng)參閱Flex組件的定位和布局。

使用Flex布局容器

使用Flex布局容器可進(jìn)行用戶(hù)界面布局。下面描述下面的示例使用的Flex布局容器:

名稱(chēng)描述

◆Panel

容器顯示一個(gè)標(biāo)題欄、一個(gè)標(biāo)題、一個(gè)邊框及其子級(jí)。默認(rèn)情況下,Panel容器會(huì)對(duì)子組件進(jìn)行垂直布局,并且可以通過(guò)將布局屬性設(shè)置為"absolute"或"horizontal"來(lái)覆蓋此設(shè)置。
HDividedBoxHDividedBox容器對(duì)子組件進(jìn)行水平布局,除了在子級(jí)之間插入一個(gè)可調(diào)整的分割線之外,它與HBox容器很相似。VDividedBox容器對(duì)子組件進(jìn)行垂直布局,而且也在子級(jí)之間插入一個(gè)可調(diào)整的分割線。

◆Tile

容器以多行或多列的形式排列其子級(jí)。

◆Form

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

◆Application，ControlBar

容器容納提供全局導(dǎo)航和應(yīng)用程序命令的組件,并可以停靠在Application容器的上邊緣。

◆Control，Bar

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

此外,該示例使用Spacer控件(它不是一個(gè)容器)來(lái)幫助進(jìn)行界面的布局。

提示:Spacer控件是用于在自動(dòng)定位的容器內(nèi)準(zhǔn)確定位元素的一個(gè)不可見(jiàn)控件。在此示例中,Spacer控件是ApplicationControlBar容器中唯一基于百分比的組件。Flex調(diào)整Spacer控件的大小以占據(jù)容器中其他組件不需要的所有可用空間。通過(guò)擴(kuò)展Spacer控件,Flex將Button控件推到該容器的右邊緣。

使用導(dǎo)航容器

Flex布局中導(dǎo)航器容器控制子級(jí)是其他容器的多個(gè)子級(jí)之間的用戶(hù)移動(dòng)或?qū)Ш健?dǎo)航器容器的直接子級(jí)必須是容器,要么是布局容器,要么是導(dǎo)航器容器。無(wú)法在導(dǎo)航器內(nèi)直接嵌套控件；控件必須是導(dǎo)航器容器的子容器的子級(jí)。

下面的表格描述下面的示例使用的導(dǎo)航器容器:

名稱(chēng)描述

◆AccordionAccordion

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

◆TabNavigatorTabNavigator

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

◆ViewStackViewStack

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

【編輯推薦】

1. 技術(shù)分享 用FlexBuilder創(chuàng)建Flex項(xiàng)目
2. Flex基礎(chǔ) 創(chuàng)建第一個(gè)Flex項(xiàng)目
3. 解析Flex事件執(zhí)行流程
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件