第13章 界面布局

13.6.3 表项
• 表项对应的MXML标签为<mx:FormItem>。该标签内 也包含label属性定义表项的名称，如“用户名”， 同时还可以利用direction属性定义在表项内组件 的排列顺序。也可以将表项看作为一种容器，拥 有其自己的布局规则，类似于盒子容器。图中用 户名表项就可以定义如下。 • <mx:FormItem label="用户名"> • <mx:TextInput id="uName" width="200"/> • </mx:FormItem>
• • • •
•
13.3.1 水平盒子容器
• 在水平盒子容器中，所有的组件都是按照从左到 右的顺序排放的，如图所示。 • 水平盒子容器对应的MXML标签为<mx:HBox>。使用 时，在需要的地方插入该标签，并定义相应的属 性。在容器中添加组件时，在该标签区域内添加 需要组件的定义即可。容器按照组件标签出现的 先后顺序显式组件。
•
13.3 盒子容器
• 在盒子类的容器（Box Containers）中，组件按照水平或者垂直的方式放 置在容器内，但所有的组件都是单行放置的。如果长度超过容器的宽或者 高，不能自动换行。 盒子类容器包括如下三种。 水平盒子容器容器（HBox Container）：组件水平放置在容器内。 垂直盒子容器（VBox Container）：组件垂直放置在容器内。 盒子容器（Box Container）：可以根据容器的属性定义布局的方向， 如果设置为垂直，则该容器与垂直盒子容器一样。如果为水平，则与水平 盒子容器一样。 水平盒子容器和垂直盒子容器都继承盒子容器对应mx.containers.Box类， 所以mx.containers.Box类的属性是这三种容器的公共属性。盒子容器共 用属性如表所示。
13.6.2 表头
• 表头对应的MXML标签为<mx:FormHeading>。利用 label属性可以定义表头的内容，如图中的“XX用 户注册”。在创建表头时，在表格控件的标签内 添加<mx:FormHeading>标签，然后将显示的内容 作为lebel属性值。图的表头代码如下。 • <mx:FormHeading label="XX用户注册"/>
• • • • • • • • • • • • • • • • • • •
13.5.2 垂直分隔盒子
• 垂直分隔盒子（VdividedBox Container）与水平 分隔类似，不同点在于在垂直分隔盒子内的组件 垂直放置，即从上到下放置。将图改为垂直放置，
13.5.3 组合使用分隔盒子
• 有些时候，需要将水平分隔盒子盒垂直分隔盒子 一起组合使用，如图所示。
13.3.2 垂直盒子容器
• 垂直盒子容器原理与水平盒子类似，不同点在于 组件排列的顺序为垂直排列，即从上到下排列，Байду номын сангаас如图所示。
13.4 画布容器
• 画布容器（Canvas Container）比盒子类容器自 由很多。盒子容器中的组件必须按照盒子的规则 创建成水平或者垂直，但画布中的组件是可以随 便放置的，如图所示。
13.1.4 容器中的事件
• • • • • • • 不仅控件中可以触发事件，容器组件也可以触发事件。容器组件可触发的 事件如下所示。 childAdd：当容器中有组件加入时，触发该事件。 childRemove：当容器中组件被删除时，触发该事件。 childIndexChange：当组件加入到容器中后，都会赋予该组件一个序号。 当序号改变时，触发该事件。 scroll：当容器不能完全显示包含的组件时，可以通过滚动条查看。使用 滚动条查看时，触发该事件。 preinitialize：在容器中的组件与容器相关联时，触发该事件。该事件 发生在组件初始化之前，或者当容器中任一组件被创建时。 initialize：当容器结构化以及容器的属性初始化后，触发该事件。当该 事件触发时，容器内所有的静态组件均被创建，但未在布局上显示。该事 件常用来为容器中的组件定义初始属性以及数据。 creationComplete：容器创建。Flex根据容器及其各组件的定义，完全创 建容器及其包含的组件，使其呈现可视状态。该事件发生在initialize之 后。
•
13.1.3 使用容器
• Flex中的容器都使用矩形的区域，容器中的组件 必须位于该矩形的区域内。Flex容器可以分为三 种布局规则：水平布局、垂直布局和绝对布局。 • 水平和垂直定位按照水平或者垂直方向自动排列 组件。绝对定位方式利用X、Y坐标定位组件的位 置，所以组件可以摆放在容器中的任一位置。画 布容器只能绝对布局，应用、面板容器既可以使 用绝对定位也可以使用水平、垂直定位。盒子、 表格容器等只能使用水平、垂直定位。在创建容 器时，可以利用layout属性定义布局方式， virtical垂直布局，horizontal水平布局， absolute为绝对布局。
13.4.2 动态改变组件位置
• 由于在画布容器中采用绝对定位的方法，所以可 以通过改变组件X、Y的坐标，动态改变组件的位 置。如图和图所示。
13.5 分隔盒子容器
• 分隔盒子容器（Divided Box Container）也可以 看作一个盒子容器。只不过在分隔盒子内部，在 盒子的每个组件之间都会添加分割器（Divider）， 如图所示。通过分隔器可以对两边的组件进行缩 放，如图所示。
13.6 表格
• 表格容器（Form Container）常在用户注册等多 项信息填写和显示时使用。如图所示。其中“XX 用户注册”可以称为表头（Form Header）。表头 下的每行显式的组件可以称为表项（Form Item）。
13.6.1 表格容器标签
• 表格容器对应的MXML标签为<mx:Form>。表格容器共分为2 部分：表头和表项。在Flex Builder的设计模式下，可以 看到每个表项都是垂直对齐的，如图所示。这样，在添加 组件的时候不需要再为对齐组件而反复定义其高、宽坐标 值等。
13.5.1 水平分隔盒子
• 水平分隔盒子（HdividedBox Container）内的组件均按照水平排列的方式放置，相邻组件之间为 分隔器。用户可以拖动分隔器在水平方向改变相邻组件的宽度。如图13.14所示。水平分隔盒子对 应的MXML标签为<mx:HDividedBox>。使用该容器时，将该标签插入到代码中后，将盒子内的组件标 签插入到<mx:HDividedBox>内即可。 图13.14的代码如下所示。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="14"> <!--设定分隔盒子--> <mx:HDividedBox x="55" y="138" width="487" height="249" borderStyle="solid" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"> <!--盒子的左边是画布容器--> <mx:Canvas width="100%" height="100%" backgroundColor="#ffffff"> <mx:Label x="73" y="118" text="画布容器"/> </mx:Canvas> <!--盒子的右边是水平盒子容器--> <mx:HBox x="394" y="160" width="100%" height="100%" backgroundColor="#8080c0"> <mx:Label text="水平盒子容器" color="#ffffff"/> </mx:HBox> </mx:HDividedBox> </mx:Application>
•
13.2 应用容器
• Flex中的应用都是以应用容器（Application Container）开始的， 应用中的所有组件（包括容器和控件）都装在应用容器中。应用 容器对应的MXML标签为<mx:Application>。在上一章的控件应用 中，应用的MXML代码都是以<mx:Application>为开始，以 </mx:Application>结束的。所以在学习容器时，应首先学习应用 容器。 在创建应用时，首先需要根据需求定义应用的大小，即该应用在 浏览器中显示的大小。定义容器大小有2种方式，采用百分比和采 用具体数值。采用百分比时，用户缩放浏览器的时候，应用也会 随着缩放，不影响观看的效果。下面这个例子即采用百分比定义 应用容器，使其占满整个浏览器区域，如图所示
13.1 什么是容器
• 什么是容器呢？举个简单的例子，我们吃饭时用的碗，保 鲜用的保鲜盒都可以称为容器。他们都可以存放食物。在 用户界面中，也需要这样的容器来存放界面里各种各样的 组件。我们有各种各样的碗、保鲜盒可以满足不同食物摆 放的需求，例如横着放、竖着放和叠着放。在用户界面中， 也枰胁煌的容器来满足不同组件的摆放要求。 • 所以，Flex提供了各种各样的容器满足不同的界面需求。 在容器中，不仅可以放置控件，还可以放置容器或者自定 义的组件。容器内的所有组件都称为该容器的孩子，都必 须遵循该容器的布局规则，如水平放置或垂直放置。 • Flex中定义的容器分为布局类容器和导航类容器。下面介 绍如何使用这两种容器。
13.1.1 布局类容器
• 布局类容器（Layout Containers）类似于HTML页 面，将组件平铺放置在容器的平面上。图中，显 式了部分布局类容器，包括盒子容器、画布容器 等。
13.1.2 导航类容器
• 导航类容器（Navigator Containers）类似于HTML中窗口之间的切换。在 Flex中，整个应用是加载在一个浏览器页面中的。很多时候，一个页面不 能满足需求，往往需要多个页面。这种情况下，就可以使用导航类容器， 在一个浏览器页面中进行Flex的页面切换。导航类容器的优势在于，用户 在进行页面切换时不需要与服务端通信。不再像HTML中那样，与服务器进 行通信后才可以打开新的窗口链接。 导航类容器不仅加快浏览速度，并且能够有效的节省页面空间。图显式了 三种导航类容器，从左到右依次为视图堆栈导航器、选项卡导航器、层叠 导航器。
13.4.1 创建画布容器
• • • • • • • • • • • • • • • • • • • • • • • 画布容器对于的MXML标签为<mx:Canvas>。创建画布容器时，插入<mx:Canvas>后，就可以在容器内定义组件。但一定 要注意，画布内的组件都是采用X、Y坐标定位的。如果不定义X、Y坐标，组件会在容器的右上角（即X=0，Y=0）的地 方重叠显示。 下面以图13.9为例介绍如何创建画布容器。图13.9的代码如下所示。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14" layout="absolute initialize="init()"> <mx:Script> <![CDATA[ [Bindable] //定义数据 private var s:Array =["上海","广州","深圳","北京"] //在应用初始化的时候,定义组合框控件中的数据 private function init():void{ cc.dataProvider = s; } ]]> </mx:Script> <!--定义Canvas容器--> <mx:Canvas width="658" height="610"> <mx:Button x="121" y="142" label="Button"/> <mx:Button x="227" y="206" label="Button"/> <mx:Button x="337" y="279" label="Button"/> <mx:ComboBox id="cc" x="227" y="337"/> </mx:Canvas> </mx:Application>