Flex组件布局

引用自http://xinsync.xju.edu.cn/index.php/archives/1937

★设置组件布局

对于所有的继承自UIComponent的组件包括Flex标准组件（Controls和Containers），我们都可以在标签内或者在AS中动态地设置它们的width和height属性。很多Controls和Containers我们都支持默认大小。对于Containers容器，我们又可以设置它的一系列布局属性properties和风格styles，它们主要包括利用verticalAlign，horizontalAlign设置容器内子组件的对齐方式；利用容器内相对坐标x,y设置子组件在容器内的相对位置；利用paddingBottom,paddingTop,paddingRight,paddingLeft属性设置上下左右边框空白；verticalGap和horizontalGap属性设置容器内子对象间隔；利用horizontalScrollPolicy和verticalScrollPolicy属性设置当容器内子组件大小超过当前容器时是否允许滑动条出现等等。这些都是Flex Containers容器的共性。所有的Flex容器类都继承自mx.core.Container类，这个类定义和实现了以上提到的和容器布局相关的这些属性。
另外Flex通过两种方式定义Controls组件在父容器的的位置和布局。一个是自动布局，Flex根据当前父容器的默认方式布局设置其子组件的布局和位置，如VBox会在容器内垂直地布局所有的子组件，而HBox则水平地布局子组件；另一种方式是绝对布局，利用子组件相对当前父容器的坐标x和y属性以绝对位置的方式定义组件的布局位置。
在所有Flex可视化组件库中共有三种容器支持绝对布局方式。Application，Panel默认使用自动布局方式，开发者可以设置其layout属性为absolute，将布局方式设置为绝对布局。第三个容器组件是Canvas，允许绝对布局。

★Flex组件布局过程

LayoutManager类是Flex的一个后台布局管理器。开发者基本上不必直接操作这个类。它主要负责运行时以实时侦听的方式解析布局应用组件的大小，风格和位置。逻辑上布局过程可分为三个阶段（提交commitment，检测measurement和实施layout）.其中每个过程都是以上一个过程的完成为基础。

● 提交阶段Commitment
这个过程LayoutManager触发待布局组件树中各个组件的commitProperties()方法用来确定与组件布局相关的属性变化。然后以相同的方式call每个组件的validateProperties()方法遍历属性列表。commitProperties()方法定义在每个容器类Container中。validateProperties（）方法则声明在ILayoutManagerClient接口中，而UIComponent可视化基类实现了ILayoutManagerClient 接口，这就是每个我们自定义的容器类或者标准容器类可以在机制上实现精确布局的理论基础。

● 检测阶段Measurement
这个过程LayoutManager触发每个组件的measureSizes()内置方法检测应用中每个组件的默认大小。检测遍历从底层嵌套最深的组件开始一直到最外层的容器。

● 实施阶段Layout
这个过程中LayoutManager触发每个组件的updateDisplayList（）方法用来最终布局组件树结构，包括组件的大小多少和位置等。布局顺序从最外层的容器一直到最底层的容器。
从另一个角度来描述，从Mxml标签嵌套最底层的Controls组件到最外层的Application组件，Flex依次检测以显式方式设置的组件绝对长度和宽度。这个过程在检测阶段完成。检测阶段完成后，进入实施阶段，Flex从最外层的容器到最底层的内嵌组件，依次确定以百分比方式设置的width和height等组件属性。第三步Flex检测和确定以设置minWidth, minHeight, maxWidth,maxHeight等属性决定大小的组件的实际长度和宽度。

★组件大小

在Flex组件布局的检测和实施阶段，LayoutManager会根据组件的width和height属性描绘组件大小。在flex的实现中组件大小的设置可以有三种方式。
（I） 默认大小：没有显式的设置长宽时，系统自动确定组件的默认大小。
（II） 绝对大小：显式的设置组件的长度和宽度
（III） 百分比大小：参考当前组件的父容器，利用百分比设置组件大小
（IV） 间接限制大小：通过设置相对父容器边框距离和中心点位置确定组件大小的方式。
应用中你会发现在Flex 组件中有若干属性可以设置组件的大小。对于这一部分的掌握将有助于你对Flex组件机制的理解。如果你没有用自定义的组件，你可以用下面介绍的方式来设置组件的大小属性。

● 在MXML标签和ActionScript中可以直接设置每个组件的width，height，percentWidth，percentHeight属性初始化大小。

● 在MXML标签中或者ActionScript中设置每个组件的minWidth，minHeight，maxWidth,maxHeight属性设置当前组件可以拥有的最大最小长度和宽度。但是如果你已经显式地设置了当前组件的绝对长度和宽度width和height，那么这种设置方式将没有效果。