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 >