第16讲：Flex中的界面布局和导航(上)

1、第第16讲：讲：Flex中的界面布局和导航中的界面布局和导航(上上)讲师：风舞烟应用应用Flex+ASP.net技术构建大型网上书店电子商务交易平台技术构建大型网上书店电子商务交易平台全程实录全程实录1、容器简介及分类2、布局容器 2.1、Canvas布局 2.2、HBox、VBox布局 2.3、ControlBar、ApplicationBar3、Divided Box 、HDividedBox、VDividedBox4、表单、表单头、单元格布局容器5、格栅布局容器(Grid Layout Container)6、导航容器(Navigator Container) 6.1、视窗堆栈导航容器

2、6.2、列表导航容器 6.3、折叠导航容器容器简介Flex容器的定位方式容器的分类按其使用方式又可以分为:布局和导航两种方式1、布局容器(Layout Container) 这类容器用于对子类组件进行定位和限定尺寸。 如：HBox,VBox等2、导航容器(Navigator Container) 这类容器用于控制用户对于多个子容器的导航和转移.如：TabNavigator不论是布局容器还是导航容器都是基于最基本的容器应用容器.2.1、Canvas容器2.1、HBox等价于：2.2、VBox等价于：控制条布局容器（ControlBar LayOut Contrainer）应用控制条容器(Appl

3、ication ControlBar Layout Container)3、Divided Box 、HDividedBox、VDividedBox如（HDividedBox.mxml）：4、表单、表单头、单元格布局容器(Form、FormHeading、FormItem Layout Container)如(FormSample.mxml):如(FormSave.mxml)：如：(FormModel.mxml)myName.textphoneNumber.text5、格栅布局容器(Grid Layout Container)Grid 容器允许您按单元格的行和列来排列子项，这与 HTML 表相

4、似。Grid 容器包含一行或多行，并且每行可以包含一个或多个单元格或项目。您应使用下列标签来定义 Grid 控件： 标签定义 Grid 容器。 标签定义网格行，其中包含一个或多个单元格。网格行必须是 标签的子项。 标签定义网格单元格，该标签必须是 标签的子项。 标签可以包含任意数目的子项。 每一行中所有单元格的高度都相同，但各行的高度可以不同。每一列中所有单元格的宽度都相同，但各列的宽度可以不同。您可以为 Grid 容器中的各行或各列定义不同数目的单元格。此外，一个单元格可以跨越容器中的多列或多行。Grid、GridRow 和 GridItem 容器具有下列默认大小特征：特征说明特征说明网格高

5、度所有行的默认或显式高度之和加上各行之间的间距。网格宽度所有列的默认或显式宽度之和加上各列之间的间距。每行以及每个单元格的高度默认值或行中最高项目的显式高度。如果 GridItem 容器未设定显式大小，则其默认高度为单元格中子项的默认或显式高度。每列以及每个单元格的宽度默认值或列中最宽项目的显式宽度。如果 GridItem 容器未设定显式宽度，则其默认宽度为单元格中子项的默认或显式宽度。行与列的间距由 Grid 类的 horizontalGap 和 verticalGap 属性确定。这两个间距的默认值是 6 个像素。默认填充所有三个容器类的 top、bottom、left 和 right 值均

6、为 0 个像素。示例（Grid.mxml）6、面板布局容器(Panel Container)示例(Panel.mxml)7、排列模板布局（Title Layout Container）示例(TitleExample.mxml)标题窗口布局容器(TitleWindow Layout Container) 示例(TitleWindApp.mxml)6、导航容器(Navigator Container)6.1、视窗堆栈导航容器(ViewStack Navigator Container) 示例：ViewStackExample.mxml6.2、列表导航容器(TabNavigator Container)示例：TabNavigatorExample.mxml6.3、折叠导航容器(Accordion Navigator Container) 示例：AccordionExample.mxml1、容器简介及分类2、布局容器3、Divided Box 、HDivide