对于一个组件丰富的GUI设计工具来说，界面布局技术已经成为界面美化的一个重要方面。Flex从控件的功能上大致提供了两种方法：容器(控制布局)和组件(提供GUI实质性功能处理)。使用容器分层管理GUI是当前的趋势，Flex也使用这种方法。主观上，我们认为它通过容器对布局进行分组或分类来管理我们接口上的组件。

接下来，我将通过简单的例子逐一介绍各种界面布局的设计。00-1010画布的界面布局，定义了一个矩形框区域，用来放置用户的容器和控件。与其他组件不同，您不能让Flex控制。必须指定绝对位置或基于约束的位置来指定组件的位置。绝对模式必须指定x，y坐标。基于约束的必须指定侧锚、基线锚或中心锚。接下来详细介绍两种布局模式：绝对模式：可以通过指定x、y坐标来指定容器中各个组件的位置。坐标是相对于画布容器的左上角设计的。也就是说，容器左上角的坐标是(0，0)。X.y可以是正的，也可以是负的，如果是负的，组件将被放置在容器范围之外的位置。当然，动作脚本可以用来完成移动操作，这涉及到事件事件。xml版本='1.0 '编码='utf-8 '？MX : windowed application xmlns : MX=' http://www . adobe.com/2006/mxml ' width=' 219 ' height=' 230 ' MX : canvas id=' my canvas ' height=' 182 ' width=' 200 ' border style=' solid ' background color=' white ' MX : button x=' 10 ' y=' 1 0 ' label=' button 1 '/MX : button

基于约束的模式：这里分别介绍了画布的Vbox和Hbox两种组合。Canvas通常有x，y来指定组件的位置，x，y的默认值应该是0。所以如果不指定x，就把组件放在x=0的位置。这可能会导致重叠。当然也可以指定其他模式的布局，比如Vbox或者Hbox。这样，就不能指定x和y。xml版本='1.0 '编码='utf-8 '？MX : windowedapplication xmlns : MX=' http://www . adobe.com/2006/mxml ' MX : canvaswidth=' 340 ' height=' 247 ' background color=' # FFFFFF ' MX : vbox id=' VB ' left=' 10 ' right=' 248 ' y=' 26 ' height=' 153 ' background color=' # a9 c0e 7 ' MX :0

00-1010，Vbox或Hbox嵌入到画布中。其实都是容器，可以独立使用。效果同上图所示。所以，HBox不会引入VBox。举个例子：xml版本='1.0 '？-容器布局 vbox simple . mxml-MX : application xmlns : MX=' http://www . adobe.com/2006/mxml ' MX : vbox border style=' solid ' padding top=' 10 ' padding bottom=' 10 ' padding right=' 10 ' MX : Button id=' fname ' label=' Button 1 '/MX : Button id='

Canvas layout 容器

你可以把控制杆和面板或者标题窗口容器组合起来使用。这样做的好处容器里的组件可以被面板或者标题窗口里的组件共用。(原文：您可以将控制栏容器与面板或标题窗口容器一起使用，以保存面板或标题窗口容器中的其他子级可以共享的组件。)举个例子：可扩展标记语言版本='1.0 '编码='utf-8 '？MX : windowed application xmlns : MX=' http://www .土坯房。com/2006/mxml ' MX :脚本！[CDATA[私有函数addToCart():void {//Handle事件}]/MX :脚本tmx :面板标题=' My Application '填充顶部=' 10 '填充底部=' 10 '填充左侧=' 10 '填充右侧=' 10 ' MX : hbox宽度=' 250 '高度=' 200 '！-目录区-/MX : hboxmx 3360控制杆宽度=' 250 ' MX :标签文本=' Quantity '/MX : numeric steper/！-使用垫片将按钮控制推向右侧- mx:Spacer .宽度='100%'/mx:Button标签='添加到购物车click=' addToCart()；//MX :控制条/MX :面板/MX :窗口应用效果图

Vbox或者Hbox 布局

这个主要用来做界面顶部的导航条。这个容器菜单栏，组合框按钮等组件。举个例子：可扩展标记语言版本='1.0 '?-容器布局 appcbarsimple。mxml-MX : APPLication xmlns : MX=' http://www。土坯房。com/2006/mxml ' MX :脚本！[CData[导入MX。控件。警惕；]]/MX :脚本tmx 3360 xllist id=' MenuxML ' menuitem标签=“文件”菜单项标签='新建'数据='新建'/菜单项标签='打开'数据='Open'/menuitem标签='保存'数据='保存'/菜单项标签='退出'数据=' Exit '/menuitemnummitem标签='编辑'菜单项标签='剪切'数据='剪切'/菜单项标签='复制'数据='复制'/菜单项效果图

ControlBar layout 容器

其实呢，分隔盒，与包厢是非常类似的，唯一不同的在于它子包厢板块自建加入了一条分隔条，用户可以更具自己需要来调整各个子包厢板块的大小。子包厢板块的分布可以分成两种，水平以及垂直的。比如

实现的代码如下：可扩展标记语言版本='1.0 '?-容器布局 hdivbox简单。mxml-MX : APPLication xmlns : MX=' http://www。土坯房。com/2006/mxml '背景色='白色' MX :脚本！[CDATA[私有函数myGrid _ initialize(): void { myGrid。数据提供者=[{ artist : '铺面，Album: '倾斜并施了魔法，价格：11.99,评论： '其中一个最好的。"4颗星“}，{Artist: '铺面，Album: '提亮角落，价格：11.99，评论： '我的最爱'}];}]/MX :脚本tmx : hdividedbox宽度='100% '高度='100%'mx:Tree id='tree1 '宽度='30% '高度=' 100% '标签字段=' @ label ' show root=' true ' MX 3360 xmllistnumitem标签=' Products ' menuitem标签='海报isBranch=' true '/menuitem标签=' CDs ' menuitem标签='铺面/change='当前消息。text=事件。当前目标。selecteditem。评论；/MX : textarea id='当前消息'宽度=' 100% '高度=' 60 ' text='其中一个最好的。"4颗星”//MX : vdividedbox/MX : hdividedbox/MX :应用程序