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