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
Tile布局规则
类似正方化的Grid,所有元素成网格式摆放。
水平和垂直的方向优先性取决于direction属性值等于TileDirection.HORIZONTAL或TileDirection.VERTICAL。
网格的宽高,取决于最宽,最高元素的宽高。
Form布局规则
表单式布局。就两个元素,FormHeading还有FormItem。
两者都各占一行显示。FormItem遵守Box布局规则。
缺口,边框和空袭
paddingTop, paddingBottom, paddingLeft和paddingRight
border
horizontalGap,verticalGap
类似HTML。
容器的嵌入
当一个容器嵌入到另一个容器时,被嵌入的容器性质可视为一个元素。
处理滚动和剪辑
滚动条的对应属性horizontalScrollPolicy/verticalScrollPolicy有3个值auto, off, on。默认为auto。
剪辑的意思是指容器的元素整体尺寸在超越容器尺寸后,是否仍显示超越部分。
对应属性clipContent,默认为false。并且只有在滚动条被明确设置为off时,设置为true才有效。但这样可能会由于强制显示超越部分,而破坏整个布局。
Spacer
还有一个比较特殊的元素Spacer。可以自定义留白的大小。
最后一个比较综合的例子
两者最大的区别在于,容器类不直接响应用户的操作,只对可视组件进行有规则布局。因此,容器类组件的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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >