解析Flex布局容器的使用
在學(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)定義的組件稱為容器的子級(jí)。AdobeFlex提供范圍廣泛的容器,從簡(jiǎn)單的框到面板和表單,到在子容器之間提供內(nèi)置導(dǎo)航的元素(如折疊式導(dǎo)航器或選項(xiàng)卡式導(dǎo)航器)。
Container類是所有Flex容器類的基本類。擴(kuò)展Container類的容器添加它們自己的功能以進(jìn)行子組件布局。
在Flex應(yīng)用程序的根部是稱為Application容器的單一容器,它代表整個(gè)FlashPlayer繪圖表面。此Application容器容納所有其他容器和組件。
提示:不同的容器支持不同的布局規(guī)則,包括automatic和absolute定位。關(guān)于這一點(diǎn)的詳細(xì)信息,請(qǐng)參閱Flex組件的定位和布局。
使用Flex布局容器
使用Flex布局容器可進(jìn)行用戶界面布局。下面描述下面的示例使用的Flex布局容器:
名稱描述
◆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)用程序命令的組件,并可以?？吭贏pplication容器的上邊緣。
◆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í)之間的用戶移動(dòng)或?qū)Ш?。?dǎo)航器容器的直接子級(jí)必須是容器,要么是布局容器,要么是導(dǎo)航器容器。無(wú)法在導(dǎo)航器內(nèi)直接嵌套控件；控件必須是導(dǎo)航器容器的子容器的子級(jí)。
下面的表格描述下面的示例使用的導(dǎo)航器容器:
名稱描述
◆AccordionAccordion
容器定義一個(gè)子面板序列,但一次僅顯示一個(gè)面板。若要導(dǎo)航容器,用戶會(huì)單擊與他們需要訪問(wèn)的子面板相對(duì)應(yīng)的導(dǎo)航按鈕。使用Accordion容器,用戶可以按任何順序訪問(wèn)子面板以在表單中前后移動(dòng)。
◆TabNavigatorTabNavigator
容器創(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í)。
◆ViewStackViewStack
導(dǎo)航器容器由彼此堆疊在一起的子容器的一個(gè)集合組成,一次只有一個(gè)容器是可見(jiàn)的或活動(dòng)的。ViewStack容器不為用戶定義切換當(dāng)前活動(dòng)容器的內(nèi)置機(jī)制；您必須使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中構(gòu)建邏輯讓用戶來(lái)更改當(dāng)前活動(dòng)的子級(jí)。
【編輯推薦】
- 技術(shù)分享 用FlexBuilder創(chuàng)建Flex項(xiàng)目
- Flex基礎(chǔ) 創(chuàng)建第一個(gè)Flex項(xiàng)目
- 解析Flex事件執(zhí)行流程
- FlexBuilder3.0與Eclipse3.4的完美結(jié)合
- 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件
