Flex 3 布局容器学习笔记

赖勇浩（ http://laiyonghao.com ）

国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。

很好的文章

Flex3 界面布局教程 (1)

http://blog.chinaunix.net/u/21684/showart_691988.html

Flex3 界面布局教程 (2)

http://blog.chinaunix.net/u/21684/showart_692022.html

Flex 组件的定位和布局

http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/

Using Layout Containers

http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_07.html

基本上看完前三篇，这方面就能搞得很好了；最后一篇是官方的关于布局容易的手册，有空的时候看看，可以了解更多细节。下面开始分享我的学习笔记（有润色），内容没有脱离上面的四篇文章，没兴趣的朋友可以跳过不看了。

定位模式

要想弄明白 flex 的界面布局，就有必要先弄明白它的定位模式。 flex 的自由之处在于你可以在 mxml 里写上许多定位模式的代码，当这些定属性发生冲突时，它会自动根据优先级来执行优先级最高的定属性。你不用担心记不住这些优先级， flex 这个 IDE 在检测到冲突时，会在 problem 框里显示一个警告，这样你可以去掉优先级比较低的定位属性了。

众多的定位模式中第一个是绝对模式，即你通过确定的数值来设定 x 、 y 、 width 和 height 属 性；使用绝对模式你需要知道你的控件摆在哪个位置和确定它的大小，显然地这很难让你的客户方便地获得适应客户屏幕和习惯的布局，所以我们更常用的是自动定 位；自动定位仍然不够灵活，这时我们可以使用基于约束的布局，顾名思义，这是一种通过描述其与容器的关系来实现布局的方法，通过使用子组件的 top 、 bottom 、 left 、 right 、 horizontalCenter 或 verticalCenter 样式属性来指定限制。关于这方面的更多内容，可以通过上面推荐的第三篇文章来了解。

HBox 、VBox 和 Spacer

这两个 Box 类是“看不见”的控件，用来约束其中的组件布局。如果你用过 wxWidgets 那一定对它们相当熟悉了，这种基于 Box 的布局方法加上约束属性，可以很容易地做出随着父控件的大小变化而相应地保持比例的变化，唉啊，想起当年用 MFC 实现这样的效果，我写了多少代码，调试了多少个夜晚啊！

在 Box 控件中，某两个控件之间的距离由 verticalGap 属性设定，默认值并不是 0 ，所以如果你想把两个控件紧挨在一起，需要手动把它设置为 0 ；如果你想单独地调整某两个控件间的间隔，那么可以使用“看不见的看得见的”控件 Spacer 来隔开它， Spacer 在界面上显示为一个纯透明的组件，所以看不见，但又能起到空白的作用，所以又看得见，它的 width 和 height 属性可以相对应地让 HBox 和 VBox 控制的组件更加漂亮。

ApplicationControlBar

如果你用 Win32 SDK 或 MFC 界面编程的经历，你一定为“在工具栏上加一个 ComboBox 或 Edit 的需求”而抓狂过吧？现在不用怕了，来到 flex 的世界，像这种问题，用 ApplicationControlBar 是相当相当地小 case 。看看下面这个图多复杂，用了它，就是一个 1 + 1 = 2 的小 case 了。

DividedBox 、HDividedBox 和 VDividedBox

别说是用 MFC ，哪怕是用 wxWidgets ，做一个可以随时拖放改变切分比例的分割组件也是困难的，但到了 Flex 的时代，一切都变得非常容易了，使用 DividedBox 及其子类可以像使用 Box 及其子类那样方便地分割组件，下面就是一个活生生的例子，拖动中间的分隔条，可以随时改变大小比例。

除了这些以外，还有最常用的容器 Canvas 、 ApplicationControlBar 的基类 ControlBar 、很有 web 特色的 Form, FormHeading, and FormItem 、与 Box 类似的 Grid 、以及 Panel 、 Tile 和 TitleWindow ，这些类都可以在手册里看到，还是那句话：有空的时候， read the fucking manuals ；工作的时候， google is your friend 。