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>