[计算机软件及应用]第5章 Flex 4系统组件：容器.ppt

Accordion容器定义了一些列纵向布局的面板，这些面板依次叠加。 Accordion容器使用mx: Accordion标签定义。 例如，创建一个类似于QQ好友窗口的导航器。在设计模式中创建的方法是，在“组件”窗口的“导航器”节点下拖动一个Accordion标签到设计区域中，通过单击“ ”图标添加导航容器的标题按钮，添加后的内容如图所示。 在每个子面板中定义相应的组件，如头像图片和姓名文本等，添加完成后的结果如图所示。 示例的完整代码如下所示： 运行结果如图所示。 5.1 Flex 4容器简介 5.2 布局容器 5.3 导航容器 5.1.1 容器分类 容器组件按照使用方式可以分为布局容器和导航容器。 布局容器主要用于用户界面的布局，包括对子类组件的定位和定义子类组件的大小。例如，HGroup容器可以自动对其子类组件进行水平的按序排列。 导航容器用于控制用户对多个子类容器的移动或导航。导航容器的直接子级必须是容器，不能在导航容器内直接嵌套控件，控件必须是导航容器的子容器的子级。 应用容器是Flex应用程序的顶层容器，它代表整个Flash Player绘图表面。应用容器能容纳所有其他容器和组件。 在Flex应用程序中，应用容器组件是Application组件，在MXML中使用s:Application标签定义，定义的方式在前面的内容中已经涉及。例如： ?xml version=1.0 encoding=utf-8? s:Application xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/mx minWidth=955 minHeight=600 creationComplete=init() /s:Application Application组件主要属性如下所示。 （1）width和height：定义应用容器的宽度和高度。 （2）maxWidth和maxHeight：布局过程中容器的最大建议宽度和高度。 （3）minWidth和minHeight：布局过程中容器的最小建议高度和高度。 （4）backgroundColor：应用程序的背景色。 （5）controlBarContent：用于在容器顶部定义一个控件区域。 （6）controlBarLayout：指定控件栏区域的布局。 （7）controlBarVisible：如果值为true，则控件栏可见。 布局主要是指组件和其他可视化元素在应用程序呈现区域中的排列和分布。组件的布局主要是指定义组件的大小和对组件的定位。 容器中组件的定位方式取决于容器组件的layout属性，layout属性使用s:layout标签定义，例如： s:layout s:BasicLayout / /s:layout layout的可选值为BasicLayout、HorizontalLayout、VerticalLayout、TileLayout和ButtonBarHorizontalLayout，默认值为BasicLayout。 1．BasicLayout BasicLayout也称为绝对布局，要求容器中的每个子类组件都被显示定位，即使用x、y属性或使用约束布局定位每个子类组件。 在进行绝对布局时，子类组件的位置是根据按以下优先级顺序的规则确定的。 （1）horizontalCenter或verticalCenter约束指定容器中心与组件中心之间的距离。将 horizontalCenter或verticalCenter约束设置为0，会使容器内的组件在水平或垂直方向上居中。 （2）如果已指定组件的baseline，则会在垂直方向上定位组件，以使其baselinePosition（通常为其第一行文本的基线）与baseline约束对齐。 （3）如果已指定组件的top或left约束，则会定位组件，使组件的布局界限的左上角从容器的左上角偏移指定的值。 （4）如果已指定组件的bottom或right约束，则会定位组件，使组件的布局界限的右下角从容器的右下角偏移指定的值。 （5）如果没有任何约束确定水平或垂直方向上的位置，则会根据组件的x坐标和y坐标定位组件。 2．HorizontalLayout HorizontalLayout布局也称为水平布局，按水平顺序从左到右排列布局子类组件，在组件和围绕组件的可选填充之间带有可选间隙。 HorizontalLayout布局中可以使用的属性如下所示。 （1）gap：子类组件之间的水平空间（以像素为单位）。 （2）variableColumnWidth：若值为true，则指定要为