Programming Flex2 - 六.布局的管理

Flex的可视组件中，分为容器类和用户操作类。

两者最大的区别在于，容器类不直接响应用户的操作，只对可视组件进行有规则布局。因此，容器类组件的tabEnabled和tabChildren属性，默认分别为false和true。

在Flex中，容器内的元素默认都是匿名的，并继承于UIComponent。如果要自定义能够添加入容器的组件，必须要实现IUIComponent接口。

Flex中的容器就好像Flash Player的显示列表，处理起来也有相同的一些API：
addChild(), addChildAt(), getChildAt(), getChildByName(), getChildIndex(), getChildren(), removeAllChildren(), contains(), setChildIndex(), 以及属性 numChildren。
这些几乎都被重载过，因为不同的容器在元素的添加，删除和摆放上都有不同的规则。和Flash Player的最初方法比起来，某些容器在添加元素上，不仅要加入指定的元素，还要多一些框框条条之类的摆设(chrome:详细解释)。

布局规则
布局规则定义了一个容器在初始时，有元素添加/删除时，或者容器被改了尺寸时，其容器中元素位置和尺寸的计算。
    与之相关的一个属性叫autoLayout，默认为true。当设置成false时，布局规则在初始和元素添加/删除时照旧，但容器尺寸改变时，就不会有任何反应。

在实现规则时，程序首先测量出各元素的大小和之间的距离，然后决定合适的位置。
    与之相关的一个属性叫includeInLayout，默认为true。当设置成false时，程序测量时忽略该元素。

大多数容器的布局规则分为两类：Box和Canvas。

Box布局规则
Box布局规则指定容器内各元素是以水平排放或是垂直排放。水平方向由左向右，垂直方向自上向下。
对应的属性direction值为BoxDirection.HORIZONTAL或BoxDirection.VERTICAL。

如果容器的宽度缺省，则以容器中最宽元素的宽度为容器宽度。
高度亦然。
如果明确设置了容器的宽/高度，当容器中所有元素的宽/高度之和大于设置值时，容器出现滚动条。
如果horizontalScrollPolicy/verticalScrollPolicy设置为off，则不出现滚动条。

一般Box不作为直接使用的容器类型，而采用继承者VBox或HBox。

Canvas布局规则
Canvas布局规则指定容器内各元素都必须明确位置关系。
位置关系分两种，一种是(x,y)坐标定位，另一种称为约束(Constraint)定位。

约束定位定义了6种对应的属性：top,bottom,left,right,horizontalCenter,verticalCenter。前4种是数值，后2种是boolean。

如果设置了元素的top属性，则元素顶部离容器顶部相差top个像素。
如果设置了元素的bottom属性，则元素底部离容器底部相差bottom个像素。
如果同时设置了元素的top和bottom属性，则元素的高度等于容器高度减top再减bottom后，剩余的像素。
left和right规则同上。
如果同时设置了元素的top/bottom和y，则忽略y。left/right和x，则忽略x。
width/height属性可以设置为百分比（在AS中是percentWidth/percentHeight）
一个容器里面的不同元素，可以混合使用坐标定位和约束定位。

混合布局规则
Application,Panel,TitleWindow这些容器同时拥有Box和Canvas布局规则。
由属性layout决定，值为ContainerLayout.ABSOLUTE,ContainerLayout.HORIZONTAL和ContainerLayout.VERTICAL。
第一种是Canvas布局规则，后两者是Box布局规则。

Grid布局规则
类型HTML的Table。
<table>相当于<mx:Grid>
<tr>相当于<mx:GridRow>
<td>相当于<mx:GridItem>
colspan和rowspan属性相当于GridItem的colSpan和rowSpan属性
align属性相当于horizontalAlign
valign属性相当于verticalAlign

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Grid>
        <mx:GridRow>
            <mx:GridItem width="100">
                <mx:Label text="Select a Color:"/>
            </mx:GridItem>
            <mx:GridItem>
                <mx:ColorPicker/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem colSpan="2" horizontalAlign="right">
                <mx:Button label="Submit"/>
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</mx:Application>

Tile布局规则
类似正方化的Grid，所有元素成网格式摆放。
水平和垂直的方向优先性取决于direction属性值等于TileDirection.HORIZONTAL或TileDirection.VERTICAL。
网格的宽高，取决于最宽，最高元素的宽高。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Tile>
        <mx:CheckBox label="运动"/>
        <mx:CheckBox label="听歌"/>
        <mx:CheckBox label="看书"/>
        <mx:CheckBox label="上网"/>
        <mx:CheckBox label="旅游"/>
        <mx:CheckBox label="泡吧"/>
        <mx:CheckBox label="看电影"/>
    </mx:Tile>
</mx:Application>

Form布局规则
表单式布局。就两个元素，FormHeading还有FormItem。
两者都各占一行显示。FormItem遵守Box布局规则。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Form>
        <mx:FormHeading label="Account Information"/>
        <mx:FormItem label="First Name, Last Name" direction="horizontal">
            <mx:TextInput id="firstName"/>
            <mx:TextInput id="lastName"/>
        </mx:FormItem>
        <mx:FormItem label="e-mail">
            <mx:TextInput id="email"/>
        </mx:FormItem>
        <mx:FormHeading label="Bug Report"/>
        <mx:FormItem label="Version">
            <mx:TextInput id="version"/>
        </mx:FormItem>
        <mx:FormItem label="Comment">
            <mx:TextArea id="comment" editable="true" width="326" height="100"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

缺口，边框和空袭
paddingTop, paddingBottom, paddingLeft和paddingRight
border
horizontalGap,verticalGap
类似HTML。

容器的嵌入
当一个容器嵌入到另一个容器时，被嵌入的容器性质可视为一个元素。

处理滚动和剪辑
滚动条的对应属性horizontalScrollPolicy/verticalScrollPolicy有3个值auto, off, on。默认为auto。
剪辑的意思是指容器的元素整体尺寸在超越容器尺寸后，是否仍显示超越部分。
对应属性clipContent，默认为false。并且只有在滚动条被明确设置为off时，设置为true才有效。但这样可能会由于强制显示超越部分，而破坏整个布局。

Spacer
还有一个比较特殊的元素Spacer。可以自定义留白的大小。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:HBox>
        <mx:Button label="First"/>
        <mx:Spacer width="40"/>
        <mx:Button label="Second"/>
        <mx:Button label="Third"/>
    </mx:HBox>
</mx:Application>

最后一个比较综合的例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel layout="horizontal" width="100%" height="100%" title="Putting it all Together">
        <mx:VDividedBox direction="vertical" width="200" height="100%">
            <mx:List width="100%" height="200">
            </mx:List>
            <mx:List width="100%">
            </mx:List>
        </mx:VDividedBox>
        <mx:Canvas width="100%" height="100%">
            <mx:Button bottom="10" right="10" label="Save"/>
        </mx:Canvas>
    </mx:Panel>
</mx:Application>