使用Flex4容器若干技巧
查看原文：http://www.adobe.com/cn/devnet/flex/articles/flex_containers_tips.html
本文适用于正在寻找使用Flex 4容器和布局的快速参考指南的开发人员。 尽管这不一定是一个复杂问题，但这似乎是许多开发人员的挫折的来源，特别是对于那些Flex刚刚入门的开发人员。 当开发人员不知道如何正确使用容器和布局时，他们的代码常常包含过多的嵌套容器和大量毫无意义的属性。
预备知识
要求具有一些关于 Flex 编程和Flash Builder的经验以便充分吸收本文的内容。
FLEX 容器基本概念
Flex 4 容器可以提供一套默认的布局：Basic、Horizontal或 Vertical以及能够基于容器内容的默认尺寸。 当进行子组件对齐操作时，注意你正在使用的容器的最小和默认尺寸。参见表 1。有些容器是可植皮的，如果真是如此，则通过在它们的皮肤上添加Spark Scroller对它们进行滚动操作。
注意Basic 布局等同于 Flex 3的绝对布局（absolute layout ）。
此外，还应该注意 Spark 容器支持包含形状和FXG元素的 GraphicElement对象以及作为直接子组件的IVisualElement对象 UI 控件。 但并不是所有的MX容器均是这种情形。
名称
最小尺寸
默认尺寸
默认布局
皮肤？
滚动条
注释
Group
0x0
Content
Basic
?包含于Scroller
与Box相似但没有skin/chrome
HGroup
0x0
Content
Horizontal
?包含于Scroller
水平对齐条目；与Vbox相似但没有skin
VGroup
0x0
Content
Vertical
?包含于Scroller
垂直对齐条目；与Vbox相似但没有skin
DataGroup
0x0
Content
Basic
?包含于Scroller
携带一个数据提供者和条目渲染器
SkinnableContainer
0x0
Content
Basic
X
添加至skin
包含式样属性
BorderContainer
112x112
112x112
Basic
X
添加至skin
包含式样属性
Panel
131x127
Content
Basic
X
添加至skin
包含标题条
Application
0x0
375x500 or all space in browser
Basic
X
添加至skin
Web应用程序
NavigatorContent
0x0
Content
Basic
X
添加至skin
用于导航容器
Window
0x0
100x100
Basic
X
添加至skin
只用于AIR
WindowedApplication
OS/chrome-specific
100x375
Basic
X
添加至skin
只用于AIR
假如从Scroller对象中完全删除?width和?height?，则滚动条不会显示出来。参见图5。
另一个可选方法是在你的代码中将包围你的内容的Scroller和 Group作为第一个子组件进行嵌套。 然而，首选方法是在skin类中保持Scroller的独立状态。 关于滚动和容器的更多详细信息，参见?在 Spark容器中添加滚动条*。
布局指南
下面是我在使用容器时遵循的若干指南：
- 如果对象的容器具有基本或绝对布局，则可以使用限制条件--例如?
left、right、top、bottom?、horizontalCenter和?verticalCenter?来确定其位置。 - 如果容器拥有具有
layout?标签或通过使用Hgroup或 Vgroup获得的 垂直或水平布局，则可以使用horizontalAlign?、?verticalAlign?、gap?、?paddingTop?、?paddingBottom、paddingLeft?和?paddingRight?属性来控制子组件以及包围它们的空白符。 这些属性不能用于基本或绝对布局。参见表2。布局场景
在自身对象中使用属性
在父容器中使用属性
位于BasicLayout 绝对容器中的对象
Left, right, top, bottom
horizontalCenter, verticalCenter
??位于Vertical、Horizontal或 TileLayout 容器中的对象
??paddingLeft, paddingRight, paddingTop, paddingBottom
horizontalAlign, verticalAlign
第二个范例（参见图 9）使用?
horizontalCenter="0"?和?verticalCenter="0"：<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/></s:Application>
通用技巧
最后，给出需要牢记的若干通用技巧：
- 总体来说，?应该选择使用限制条件?而不选择具有（x,y）值的绝对定位方式，因为限制条件可以动态地调整浏览器的大小。 当为web、桌面、手机和平板电脑设备开发跨平台的应用程序时，这一点更为重要，因为这些设备的屏幕尺寸变化较大。
- 一般来说，可以将?
left/right?用于大小调整目的，而将?horizontalCenter?和verticalCenter?用于定位目的。 - 对于一般居中定位目的，特别是当启动最小尺寸窗口并且你希望对一个对象进行居中定位时，可以使用horizontalCenter。
