解析Flex布局容器的使用-flex布局详解

在学习Flex的过程中，你可能会遇到Flex布局容器的使用的问题，这里和大家分享一下，AdobeFlex提供范围广泛的容器,从简单的框到面板和表单,到在子容器之间提供内置导航的元素(如折叠式导航器或选项卡式导航器)。

Flex布局容器的使用

使用容器

容器定义Adobe?Flash?Player的绘图表面的一个矩形区域。在容器内,可以定义希望出现在容器内的组件,包括控件和容器。在容器内定义的组件称为容器的子级。AdobeFlex提供范围广泛的容器,从简单的框到面板和表单,到在子容器之间提供内置导航的元素(如折叠式导航器或选项卡式导航器)。

Container类是所有Flex容器类的基本类。扩展Container类的容器添加它们自己的功能以进行子组件布局。

在Flex应用程序的根部是称为Application容器的单一容器,它代表整个FlashPlayer绘图表面。此Application容器容纳所有其他容器和组件。

提示:不同的容器支持不同的布局规则,包括automatic和absolute定位。关于这一点的详细信息,请参阅Flex组件的定位和布局。

使用Flex布局容器

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

名称描述

◆Panel

容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下,Panel容器会对子组件进行垂直布局,并且可以通过将布局属性设置为"absolute"或"horizontal"来覆盖此设置。
HDividedBoxHDividedBox容器对子组件进行水平布局,除了在子级之间插入一个可调整的分割线之外,它与HBox容器很相似。VDividedBox容器对子组件进行垂直布局,而且也在子级之间插入一个可调整的分割线。

◆Tile

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

◆Form

容器以标准的表单格式排列其子级。

◆Application，ControlBar

容器容纳提供全局导航和应用程序命令的组件,并可以停靠在Application容器的上边缘。

◆Control，Bar

容器将控件置于Panel或TitleWindow容器的下边缘。

此外,该示例使用Spacer控件(它不是一个容器)来帮助进行界面的布局。

提示:Spacer控件是用于在自动定位的容器内准确定位元素的一个不可见控件。在此示例中,Spacer控件是ApplicationControlBar容器中唯一基于百分比的组件。Flex调整Spacer控件的大小以占据容器中其他组件不需要的所有可用空间。通过扩展Spacer控件,Flex将Button控件推到该容器的右边缘。

使用导航容器

Flex布局中导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。导航器容器的直接子级必须是容器,要么是布局容器,要么是导航器容器。无法在导航器内直接嵌套控件；控件必须是导航器容器的子容器的子级。

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

名称描述

◆AccordionAccordion

容器定义一个子面板序列,但一次仅显示一个面板。若要导航容器,用户会单击与他们需要访问的子面板相对应的导航按钮。使用Accordion容器,用户可以按任何顺序访问子面板以在表单中前后移动。

◆TabNavigatorTabNavigator

容器创建和管理一组选项卡,使用它们可在其子级中间导航。TabNavigator容器的子级是其他容器。TabNavigator容器为每个子级创建一个选项卡。当用户选中某个选项卡时,TabNavigator容器会显示相关联的子级。

◆ViewStackViewStack

导航器容器由彼此堆叠在一起的子容器的一个集合组成,一次只有一个容器是可见的或活动的。ViewStack容器不为用户定义切换当前活动容器的内置机制；您必须使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中构建逻辑让用户来更改当前活动的子级。

【编辑推荐】