Flex的Layout机制

引用地址：http://www.rkuk.org/post/7.html

 

　　Flex的Layout机制具体的说就是Flex对组件的大小和位置的控制算法。从Flash开始初学Flex，也许会对Flex中设置组件的大小有些不适应。在Flash中，DisplayObject的width和height会根据DisplayObject所包含的“可视化元素”的大小自动调整，例如mc中的children的移动或者缩放都可能引起mc的width和height变化，而如果直接改变mc的width和height，会使mc内的可视化元素放大或缩小（但不会引起可视化元素重组），mc的scaleX和scaleY也同时改变。在Flex中，组件的width和height已经被override，因此其表现和Flash有所不同：Flex中组建width和height不一定根据可视化元素大小而定，例如设置了精确大小的Container，即使其内部的可视化元素超出了Container的范围，Container的大小仍然是指定的精确值，同样的设置Flex控件的width和height时，不是对控件可视化元素的缩放，通常都会引起可视化元素重画成新的大小，而不引起scaleX和scaleY的变化。

 

　　以前从来没想过override能有那么大的“威力”，所以被Flex的width和height搞的糊里糊涂的，呵呵看来菜鸟就是菜鸟，还好随着不断的学习总算逐渐更领会到OOP的概念和Flash与Flex这些差别。发了点小感慨作为开场白，接下来就说说初学Flex的Layout机制的一些收获吧。

 

　　设置Flex组件的大小的方式有三种：精确大小explicit sizing、默认大小default sizing、百分比大小percent sizing。精确大小是指通过ActionScript或者MXML明确设置了组件的width或height为多少像素，是一个精确值；默认大小指的是没有通过ActionScript或者MXML设置组件的width或height；百分比大小是指通过ActionScript设置了组件的percentWidth或percentHeight，也可以通过MXML设置组件的width或height为一个百分数。

Flex组件大小有以下几种：

1. 实际大小：也就是最终显示出来的组件的大小，可以通过width和height指定和获得；
2. 精确大小：也就是通过精确大小的方式设置组件大小时，所指定的值，可以通过explicitWidth和explicitHeight获得；
3. 默认大小：也就是Flex自动计算出的组件大小，可以通过measuredWidth和measuredHeight获得，如果设置组件的大小为默认大小时，那么组件的默认大小也就是实际大小；
4. 百分比大小：也就是通过百分比大小的方式设置组件大小时，所指定的值，可以通过percentWidth和percentHeigh指定和t获得；
5. 组件大小的范围：也就是限制组件的大小应该处于某个区间内，可以通过minWidth、maxWidth、minHeight和maxHeight指定和获得这个区间。

　　知道了Flex组件大小的设置方式合类型之后，再了解一下Flex的Layout流程。Layout流程分为三步，第一步是刷新组件的属性，称为Commitment Pass。第二步是在组件属性更新后，从DisplayList中最深层的组件开始，计算每个组件的测量大小，即查看控件使用的是精确大小还是默认大小，并获取相应的值，这一步称为Measurement Pass。第三步是从DisplayList中的最外层也就是Application开始向内计算每个组件的实际的大小，并完成对控件的大小和位置设置，同时也触发控件的重画等方法，这个过程叫做Layout Pass。

 

　　这么多和大小相关的东西，相对Flash确实复杂多了，但是有了这些东西，才让Flex的Layout相对Flash更自动化。在实际使用时，不同的大小设置方式如何产生影响？这就需要更具体概述一下了。

1. 采用精确大小的方式设定组件大小
   当用户明确指定了组件的width和height的像素值时，布局时Flex就会强制使用用户指定的像素值，注意这种设置是强制的，Flex会保证组件的实际大小width和height就等于设定值，并且指定的大小不受组件大小的范围限制。在用户通过width和height设置精确大小时，同时也就设定了组件的explicitWidth和explicitHeight。
2. 采用默认大小的方式设定组件大小
   当用户不设置组件width和height，也不设置组件的percentWidth和percentHeigth时，布局时就自动计算组件的大小，也就是使用组件的默认值作为组件的实际大小。不同组件有不同的默认值，组件的默认值也会因为某些属性改变而改变，例如Button的默认值就与button的label字符长度有关，并且组件的默认大小一定会在[minWidth，maxWidth]和[minHeight，maxHeight]之间，但不一定就是这个区间内的最小值。
3. 采用百分比大小方式设定组件大小
   当用户使用百分比的方式指定了组件的大小时，布局时将使用空间的百分比大小。组件的百分比大小是建议性的，Flex只是尽量保证组件的大小与parent的可视区域大小成所设定的比例。有以下几点需要注意：
   
   组件的百分比大小和精确大小是互斥的属性，当设置了组件的percentWidth和percentHeight时，相应的explicitWidth和explicitHeight属性就是NaN，反之亦然。而width和height指的是组件在布局过程执行完成后实际的长宽，并不会因为设置了百分比大小就为NaN。只是通过width和height设置精确大小时，会同时设定explicitWidth和explicitHeight属性，从而使percentWidth和percentHeight属性为NaN。
   
   组件百分比大小指的是相对其parent中的可视区域的大小的百分比，也就是刨除parent的border width、padding、gap等区域后（gap个数会根据组件数量而定），用于放置组件的那个区域的大小，并不是parent的实际大小。对于Tile container或者TileLayout，children的百分比是指相对于每个tile cell的百分比，对于其它大部分Container，百分比是相对于整个容器可视区域的。
   
   当组件设置为百分比大小时，组件的实际大小是在parent的大小调整过程中计算出来的，如果按照设定的比例超出了组件的minimum size和maximun size范围，那么组件会被设置成minimum size或maximun size（组件的minimum size会根据组件和组件所包含的child不同而不同），而不是百分比指定的大小（因此百分比大小只是一个建议值）。
   
   当组件设置为百分比时，如果组件的parent是自动布局的，并且还包含了其它组件，那么parent会先保证设置为精确大小和默认大小的child组件以及parent相应的border width、padding和gap先分配空间；对于设置成百分比大小的child组件，会根据parent的可视区域大小（排除border width、padding和相应数量的gap之后的区域大小）尝试按照设置的百分比设置组件的大小，但是如果这些组件的大小超出了parent剩余的空间，那么parent会把剩余空间按照组件的百分比所构成的比例，分配给每个百分比组件（同时也要保证组件大小在minimum size或maximun size之间）。例如Hbox的实际宽度是400（确定实际宽度时，是先layout pass过程，先确定parent才确定child），包含左右padding各50，包含一个设置了宽度为120的button，parent的gap为40，还有两个设置了宽度为60%和30%的组件，那么计算这两个组件实际宽度时，首先分配一个button和左右padding以及2个gap（3个组件因此有2个gap）的空间，总大小为120 + 2×50 + 2×40 = 300，parent中剩余的区域还有100。根据百分比两个组件的大小是（400- 2×50 - 2×40）×60%和（400- 2×50 - 2×40）×30%，分别为132和66，但是132+66大于parent剩余的空间，因此，parent把剩余的100空间分为两个分给两个组件，60%的组件分到的空间是100×60/(60+30)，30%的组件分到的空间是100×30/(60+30)，分别是67和33，分配到的大小满足在minimum size或maximun size之间，因此最终组件的实际大小就是这个值。如果手动设置两个百分比组件的minimum size为70和50，那么67和33就不满足可取的值范围，因此组件实际大小会被设定为70和50，这样就会超出HBox的可视区域，由此就会出现滚动条（也可以设置不出现滚动条）。
   
   当组件设置为百分比时，如果组件的parent是绝对布局的，对于halo Container的child，会根据parent的可视区域大小乘以百分比计算实际大小，同时还考虑minimum size或maximun size约束，也考虑组件的位置，保证组件处于哪个位置上时实际大小不会超出parent的边界。对于spark Container的child，会根据parent的可视区域大小乘以百分比计算实际大小，同时还考虑minimum size或maximun size约束，但不考虑child自身位置的影响。