Flex学习笔记_04 使用容器控制界面布局

1.管理程序的布局

容器累组件都位于mx.containers包中。Container类是UIComponent的子类，是所有Flex容器类的父类，每个容器类都在它的基础上添加自己的功能。

 

1.1控制Application 的布局

Application 是一个特殊的容器，位于界面元素的根部，包含了整个程序的所有元素。

layout ：

    值为absolute时，horizontalAlign水平对齐和verticalAlign垂直对齐不起作用，界面上的元素将由各自的坐标决定。

值为vertical 或 horizontal时，元素的位置由horizontalAlign和verticalAlign控制。

 

width 长， height 高。决定SWF文件的尺寸。

 

我们可以设置如下的属性，所有组件公有：

horizontalGap 水平间距

vericalGap 垂直间距

paddingTop 顶部边距

paddingLeft 左边距

paddingRight 右边距

paddingBottom 底边距

 

Constraint layout 约束布局，只能在layout属性值为absolute才能使用，具有这一特性的容器有：Application、Canvas、Panel和Panel的子类TitleWingdow

点击元素得到如下界面：

如果对某一组件使用了约束布局，它会被强制定位在相应的位置，设置的X,Y坐标会失效。

 

ApplicationContolBar是和Application相关的一个容器，通常用来提供全局导航。有水平（默认）和垂直方向选择。它的dock属性，表示是否强行停靠在Application的顶部。默认false，被当作一个普通的组件。true，始终在顶部，宽度为100%。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
3.layout="absolute" horizontalAlign="left" verticalAlign="top" height="100%" width="100%"  
4. horizontalGap="0" verticalGap="0" paddingTop="0">     
5.    <mx:Button label="Button1" height="120" x="24" y="0"/>  
6.    <mx:Button label="Button2" top="0" bottom="30" width="72" horizontalCenter="-72"/>  
7.    <mx:Button label="Button3" width="240" x="168" y="0"/>  
8.    <mx:ApplicationControlBar dock="true">  
9.        <mx:Label text="这里是顶部导航" width="93" height="20"/>  
10.    </mx:ApplicationControlBar>  
11.</mx:Application>  

1.2 Canvas

Canvas 直接继承自Container，体积小，使用灵活。在它里面的元素只能由X,Y来定位。如果元素超出 Canvas的区域范围，Canvas会自动增加滚动条。每个容器默认情况下都会自动带滚动条。可以通过horizontalScrollPolicy和 verticalScrollPolicy 的属性值来控制，on/off/auto。在AS中对应ScrollPolicy.ON,ScrollPolicy.OFF,ScrollPolicy.AUTO。

 

1.3 VBox 和 HBox

VBox 和 HBox 都是Box的子类，和Canvas相比,Box对子级元素采取规则的布局方式，其中VBox内的元素垂直方向分布，而HBox水平方向分布。通过horizontalAlign和verticalAlign控制容器内的元素对齐方式。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:HBox x="27" y="30" width="50%" height="50%" horizontalAlign="left"    
4.            verticalAlign="middle">  
5.        <mx:Button label="Button"/>  
6.        <mx:Label text="这是一个HBox"/>  
7.    </mx:HBox>  
8.    <mx:VBox width="50%" x="263" y="30" height="100%">  
9.        <mx:Label text="这是一个VBox"/>  
10.        <mx:Button label="Button"/>  
11.    </mx:VBox>       
12.</mx:Application>  

 

1.4 用DividedBox分割界面

DividedBox继承自Box类，它有两个子类：HDividedBox和VDividedBox。类似于HBox和VBox，多了在子级元素之间增加了可以拖动的分割块。拖动分割块可以动态的调整分割块附近元素的长宽。

borderStyle是组件的样式之一，表示边框样式，默认：none，表示无边框。solid为实心线条。

liveDragging：true 表示在拖动时，在松开鼠标后，调整位置。false 拖动时调整。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:HDividedBox width="90%" height="90%" liveDragging="false" borderStyle="solid"  
4.            x="10" y="10">  
5.        <mx:Canvas width="200" height="246">  
6.            <mx:Label x="33" y="10" text="一个Canvas容器"/>          
7.        </mx:Canvas>  
8.        <mx:HBox width="50%" height="50%">  
9.            <mx:Label text="HBox容器" width="140"/>  
10.            <mx:HBox width="50%" height="50%">  
11.                <mx:Label text="HBox内的HBox" width="140"/>  
12.            </mx:HBox>  
13.        </mx:HBox>  
14.    </mx:HDividedBox>  
15.</mx:Application>  

 

2. 窗口布局

Panel组件就是这样一个窗口组件，它直接继承Container。和它的子类TitleWindow都具有窗口程序的特点：有标题条，可以放置其他内容，形成一个整体。

 

2.1 Panel 组件

fontSize 表示字体大小，默认是10.一般中文12显示较清晰。

title 表示窗口的标题。

ControBar Panel的一个容器，位置不可调整总是在底部，布局模式跟HBox相同。可以放置按钮等组件。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:Panel x="53" y="49" width="302" height="254" layout="horizontal" title="这里是标题"  
4. fontSize="12">  
5.        <mx:Label text="这里放置其它内容"/>  
6.        <mx:ControlBar height="24" paddingBottom="0" paddingTop="0"    
7.horizontalAlign="right">  
8.            <mx:Button label="其他控制"/>  
9.        </mx:ControlBar>  
10.    </mx:Panel>      
11.</mx:Application>  

为窗口添加关闭按钮：

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Canvas width ="300" height="300" xmlns:mx="http://www.adobe.com/2006/mxml">  
3.<mx:Script>  
4.    <![CDATA[  
5.        //点击关闭按钮时触发该函数  
6.        internal function doClose():void{  
7.            visible = false;  
8.        }  
9.    ]]>  
10.</mx:Script>  
11.        <mx:Panel width ="100%"  height="100%" layout="absolute" title="这里是标题"    
12.fontSize="12">  
13.        <mx:Label text="这里放置其它内容" x="0" y="0"/>      
14.        <mx:ControlBar height="24" paddingBottom="0" paddingTop="0" horizontalAlign="right"  
15. x="0" y="230">  
16.            <mx:Button label="其他控制"/>  
17.        </mx:ControlBar>  
18.    </mx:Panel>      
19.    <mx:Canvas width="40" height="24" top = "4" right="10">  
20.            <mx:Button label="X" width="30" x="10" click = "doClose()"/>  
21.        </mx:Canvas>  
22.</mx:Canvas>  

将上面的代码保存为MXML，然后使用下面的代码new一个实例出来：

1.<?xml version="1.0" encoding="utf-8"?>  
2.<!--这里我们使用了命名空间，将主程序目录下所有的对象归到“tree”标记下-->  
3.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
4.   xmlns:tree= "*">    
5.    <tree:Panel2 x="54" y="24">          
6.    </tree:Panel2>  
7.</mx:Application>  

Application 的 applicationComplete 事件 会在主程序初始化后被触发。

接下来为窗口实现拖动功能，使用PopUpManager这个对象弹出Panel窗口，窗口将置于最上层，被称为Pop-Up弹出窗口。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    
3.applicationComplete ="initApp()">  
4.    <mx:Script>  
5.        <![CDATA[  
6.            //导入类         
7.            import mx.managers.PopUpManager;  
8.            import mx.managers.PopUpManagerChildList  
9.            //导入Panel对象  
10.            import mx.containers.Panel;  
11.            //初始化函数  
12.            internal function initApp():void{  
13.                var win:Panel = new Panel();  
14.                win.width = 300;  
15.                win.height = 240;  
16.                win.title = "PopUp Panel";  
17.                win.x = 20;  
18.                win.y = 20;  
19.                //popup:弹出窗口  
20.                PopUpManager.addPopUp(win,this,true);  
21.            }  
22.        ]]>  
23.    </mx:Script>  
24.    <mx:Button x="130" y="280" label="Button"/>  
25.</mx:Application>  

 

PopUpManager.addPopUp函数可以将对象置于父级对象的顶层，对应的removePopUp可以删除弹出的对象。

addPopUp有4个参数：

window:IFlexDisplayObject, 弹出的对象

parent:DisplayObject, 分配给新弹出窗口层级的对象

modal:Boolean=false,  true的话，变成模式窗口，直到窗口关闭，其他元素不可用。

childList:String=null 将添加新窗口的对象，默认为PopUpManagerChildList. PARENT

 

所有组件都可以被弹出，会触发组件的内部预写方法。如Panel，弹出后，内部的isPopUp属性变为true，就可拖动了。

 

2.2 TitleWindow 组件

继承Panel ，多了一个关闭按钮。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.<mx:Script>  
4.    <![CDATA[  
5.        //点击后出发 close 事件，执行该函数  
6.        internal function doClose():void{  
7.            txt.text = "关闭按钮被点击了";  
8.        }  
9.    ]]>  
10.</mx:Script>  
11.    <mx:TitleWindow x="52" y="45" width="250" height="271" close="doClose()" layout="absolute" title="TitleWindow 例子" fontSize="12" showCloseButton="true">  
12.        <mx:TextArea id="txt" x="25" y="38" height="143" text="这是一个文本区"/>  
13.    </mx:TitleWindow>  
14.</mx:Application> 

showCloseButton指定是否显示关闭按钮。

close指定点击关闭按钮调用的方法。是TitleWindow的关闭事件。

creationComplete 事件，对象的初始化后触发的事件。

 

3. 动态控制对象的布局

 

3.1 使用Tile 显示多个按钮

Tile直接继承Container，使用起来非常方便。适合重复排列的元素。

direction 属性值为 horizontal时，设置其子级对象的布局方向为水平方向。

tileWidth 和 tileHeight 用来控制每个子级对象的长和宽。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.  
4.    <mx:Script>  
5.        <![CDATA[  
6.            //导入 Button对象  
7.            import mx.controls.Button;  
8.            internal function addItem():void{  
9.                //创建Button实例  
10.                var btn:Button = new Button();  
11.                btn.label = "btn_10";  
12.                btn.height = 50;  
13.                btn.width = 75;  
14.                //向Tile容器中添加该按钮  
15.                holder.addChild(btn);  
16.            }  
17.        ]]>  
18.    </mx:Script>  
19.    <mx:Tile id="holder" x="41" y="45" width="330" height="280" horizontalGap="2"  
20.         direction="horizontal" tileHeight="80" tileWidth="80">  
21.        <mx:Button label="btn_1" height="50" width="75"/>  
22.        <mx:Button label="btn_2" height="50" width="75"/>  
23.        <mx:Button label="btn_3" height="50" width="75"/>  
24.        <mx:Button label="btn_4" height="50" width="75"/>  
25.        <mx:Button label="btn_5" height="50" width="75"/>  
26.        <mx:Button label="btn_6" height="50" width="75"/>  
27.        <mx:Button label="btn_7" height="50" width="75"/>  
28.        <mx:Button label="btn_8" height="50" width="75"/>  
29.        <mx:Button label="btn_9" height="50" width="75"/>  
30.    </mx:Tile>  
31.    <mx:Button x="266" y="340" label="增加一个按钮" fontSize="12" click="addItem()"/>  
32.</mx:Application>  

3.2 更强大的 Grid组件

Grid 继承自Box，类似于HTML中的表格，由行和单元格组成。单元格中可以包含其他元素。行必须为GridRow对象，每个单元格必须为GridItem对象。两者继承自HBox。

colSpan 表示单元格所占的横向格数，rowSpan 表示单元格所占的纵向行数。类似于HTML的Table。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.        <mx:Grid x="62" y="96" horizontalGap="2">  
4.            <mx:GridRow width="100%" height="79">  
5.                <mx:GridItem width="100%" height="100%">  
6.                    <mx:Button label="Button1"/>  
7.                </mx:GridItem>               
8.                <mx:GridItem width="100%" height="100%" colSpan = "2">  
9.                    <mx:Button label="Button2" height="60"/>  
10.                </mx:GridItem>  
11.                <mx:GridItem width="100%" height="100%">  
12.                    <mx:Button label="Button3"/>  
13.                    <mx:Button label="Button4"/>  
14.                </mx:GridItem>  
15.            </mx:GridRow>  
16.            <mx:GridRow width="100%" height="79">  
17.                <mx:GridItem width="100%" height="100%">  
18.                    <mx:Button label="Button"/>  
19.                </mx:GridItem>               
20.                <mx:GridItem width="100%" height="100%">  
21.                    <mx:Button label="Button" height="60" width="98"/>  
22.                </mx:GridItem>  
23.                <mx:GridItem width="112" height="100%">  
24.                    <mx:Button label="Button" width="41" height="55"/>  
25.                    <mx:Button label="Button" width="85"/>  
26.                </mx:GridItem>  
27.            </mx:GridRow>        
28.        </mx:Grid>       
29.</mx:Application>  

4. 方便的导航容器

导航类允许用户在其子级元素之间却换，但必须是容器类型，单我们可以在子级容器中圈套其他容器和组件。

 

4.1 Accordion 组件

Accordion 是一个可折叠的导航器，包含一个子面板列表，但一次仅显示一个面板。

selectedChild 和 selectedIndex  表示当前显示的子元素和显示元素的索引号，可以利用这两个属性来控制组件的显示内容。如代码中的tab_menu.selectedIndex = 1 表示却换到第2个面板。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.  
4.    <mx:Script>  
5.        <![CDATA[  
6.            internal function doSkip():void{  
7.                tab_menu.selectedIndex = 1;  
8.            }  
9.        ]]>  
10.    </mx:Script>  
11.  
12.    <mx:Accordion id="tab_menu" x="57" y="67" width="194" height="270" fontSize="12">  
13.        <mx:Canvas label="Item 1" width="100%" height="100%">  
14.            <mx:Label text="Canvas1" />  
15.            <mx:ColorPicker x="10" y="38"/>  
16.        </mx:Canvas>         
17.  
18.        <mx:VBox label="Item 2" width="100%" height="100%">  
19.            <mx:Text text="这里插入内容" height="28"/>  
20.            <mx:ComboBox>  
21.                <mx:Array>  
22.                    <mx:Object label="请选择性别"/>                       
23.                    <mx:Object label="女"/>  
24.                    <mx:Object label="男"/>  
25.                </mx:Array>  
26.            </mx:ComboBox>  
27.        </mx:VBox>  
28.  
29.        <mx:Panel title="内嵌的Panel" label="Item 3" width="90%" height="90%">  
30.        </mx:Panel>  
31.    </mx:Accordion>      
32.  
33.    <mx:Button x="259" y="315" label="跳到第二个菜单" fontSize="14" labelPlacement="right" click="doSkip()"/>  
34.</mx:Application>  

4.2 ViewStack 组件

由若干重叠在一起的子容器组成，每次只有一个容器是可见或活动的。但它不为用户提供却换当前活动容器的界面接口，可以通过AS进行控制，或者和其他控制类容器联合使用。如：LinkBar、TabBar、ButtonBar、ToggleButtonBar等。

一般用来做向导类的应用。就是有那种下一步下一步的。

selectedChild 表示当前处于激活状态的子级对象。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:Script>  
4.        <![CDATA[  
5.            internal function doChange():void{  
6.                if(viewstack_1.selectedChild == child2){  
7.                    viewstack_1.selectedChild = child1;  
8.                }else{  
9.                    viewstack_1.selectedChild = child2;  
10.                }  
11.            }  
12.        ]]>  
13.    </mx:Script>  
14.    <mx:ViewStack x="46" y="72" id="viewstack_1" width="200" height="200">  
15.        <mx:Canvas id="child1" label="View 1" width="100%" height="100%">  
16.            <mx:List fontSize="12">  
17.                <mx:Array>  
18.                    <mx:Object label="请选择您感兴趣的技术："/>                     
19.                    <mx:Object label="Flash"/>  
20.                    <mx:Object label="Flex"/>  
21.                    <mx:Object label="Flash Media server"/>  
22.                    <mx:Object label="Breeze"/>  
23.                </mx:Array>  
24.            </mx:List>  
25.        </mx:Canvas>  
26.        <mx:Canvas id="child2" label="View 2" width="100%" height="100%">  
27.            <mx:TextInput text="请输入您的邮箱地址"  fontSize="12"/>  
28.        </mx:Canvas>  
29.    </mx:ViewStack>  
30.    <mx:Button x="46" y="304" label="切换按钮" fontSize=" 12" click="doChange()"/>  
31.</mx:Application>  

4.3 使用 TabNavigator 进行快速导航

继承自ViewStack，还提供了用户却换内容的界面接口。

类似标签页却换面板。

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:TabNavigator x="70" y="91" width="200" height="200" >  
4.        <mx:Canvas label="Tab 1" width="100%" height="100%">  
5.            <mx:CheckBox x="10" y="31" label="选中我" fontSize="12"/>  
6.             
7.        </mx:Canvas>  
8.        <mx:Canvas label="Tab 2" width="100%" height="100%">  
9.            <mx:Label x="20" y="41" text="第二个面板" fontSize="12"/>  
10.        </mx:Canvas>  
11.    </mx:TabNavigator>  
12.       
13.</mx:Application> 

5. 表单布局

Flex提供了一套表弟组件，让我们可方便的构建复杂的表单程序。

Form容器是表单功能组件中的主要成员，继承自Container，相关的组件还有FormItem 和 FormHeading。

 

5.1 简单的用户输入表单

FormHeading 表示表弟标题，这里也可以放置顶部的导航控制。

FormItem 可以容纳多个组件，且组件的布局方向有 horizontal 和 vertical。FormItem 还有一个属性required 表示本栏的值是否为空。

 

5.2 表单验证

最后添加了5个验证对象，分别针对不同的组件，他们的source属性表示目标对象：

StringValidator 字符验证，property="text " 为文本属性，minLength 和 maxLength 表示字符最短长度和最长长度。tooShortError 提示信息。

PhoneNumberValidator 电话号码验证

DataValidator 日期验证

EmailValidator 邮箱验证

1.<?xml version="1.0" encoding="utf-8"?>  
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
3.    <mx:Panel title="用户注册信息" width="359" height="303" x="24.5" y="37" fontSize="12">  
4.        <mx:Form width="100%" height="100%" horizontalGap="0">  
5.            <mx:FormHeading label="用户资料" width="100%"/>  
6.            <mx:FormItem label="用户名：" width="100%" required="true">  
7.                <mx:TextInput width="100%" id="user_txt"/>                   
8.            </mx:FormItem>  
9.            <mx:FormItem label="密码：" width="100%" required="true">  
10.                <mx:TextInput width="100%" displayAsPassword="true" id="pass_txt"/>                  
11.            </mx:FormItem>  
12.            <mx:FormItem label="性别：" width="100%" direction="horizontal">  
13.                <mx:RadioButton groupName="isMale" label="男" />   <mx:RadioButton groupName="isMale" label="女" />      
14.            </mx:FormItem>  
15.            <mx:FormItem label="邮箱：" width="100%">  
16.                <mx:TextInput width="100%" id="email_txt"/>                  
17.            </mx:FormItem>  
18.            <mx:FormItem label="电话：" width="100%">  
19.                <mx:TextInput width="100%" id="phone_txt"/>                  
20.            </mx:FormItem>  
21.            <mx:FormItem label="出生年月：" width="100%">  
22.                <mx:TextInput width="100%" id="birth_txt"/>                  
23.            </mx:FormItem>  
24.        </mx:Form>  
25.        <mx:ControlBar height="32" paddingBottom="0" paddingTop="0" horizontalAlign="center">  
26.            <mx:Button label="确定"/>  
27.            <mx:Button label="重写"/>  
28.        </mx:ControlBar>  
29.    </mx:Panel>  
30.       
31.    <mx:StringValidator source="{user_txt}" property="text" minLength="6" maxLength="12" tooShortError="用户名太短了"/>  
32.    <mx:StringValidator source="{pass_txt}" property="text" minLength="6" maxLength="12"/>  
33.    <mx:PhoneNumberValidator source="{phone_txt}" property="text"/>  
34.    <mx:DateValidator source="{birth_txt}" property="text"/>  
35.    <mx:EmailValidator source="{email_txt}" property="text"/>  
36.    
37.</mx:Application>