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

Flex布局容器的使用

使用容器

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

Container類是所有Flex容器類的基本類。擴展Container類的容器添加它們自己的功能以進行子組件布局。

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

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

使用Flex布局容器

使用Flex布局容器可進行用戶界面布局。下面描述下面的示例使用的Flex布局容器:

名稱描述

◆Panel

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

◆Tile

容器以多行或多列的形式排列其子級。

◆Form

容器以標準的表單格式排列其子級。

◆Application，ControlBar

容器容納提供全局導航和應用程序命令的組件,并可以停靠在Application容器的上邊緣。

◆Control，Bar

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

此外,該示例使用Spacer控件(它不是一個容器)來幫助進行界面的布局。

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

使用導航容器

Flex布局中導航器容器控制子級是其他容器的多個子級之間的用戶移動或?qū)Ш?。導航器容器的直接子級必須是容?要么是布局容器,要么是導航器容器。無法在導航器內(nèi)直接嵌套控件；控件必須是導航器容器的子容器的子級。

下面的表格描述下面的示例使用的導航器容器:

名稱描述

◆AccordionAccordion

容器定義一個子面板序列,但一次僅顯示一個面板。若要導航容器,用戶會單擊與他們需要訪問的子面板相對應的導航按鈕。使用Accordion容器,用戶可以按任何順序訪問子面板以在表單中前后移動。

◆TabNavigatorTabNavigator

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

◆ViewStackViewStack

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

【編輯推薦】

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