本文为Flex4容器和布局的快速参考指南，适合初学者理解如何正确使用容器和布局，避免代码中出现不必要的嵌套容器和冗余属性。文章详细介绍了Flex容器的基本概念、布局属性、滚动操作、布局嵌套及布局场景，并提供了实用的布局技巧和示例。
[size=small][size=x-large]查看原文：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
表 1. Spark容器
在默认情形下，当你利用Flash Builder创建一个web应用程序，它将分别具有955 和600 的最小宽度和最小高度。 你可以在Flash Builder 中通过从File Template中删除minSize变量来改变这一设置。
在Flash Builder中，选择Flash Builder > Preferences。
展开Flash Builder 并且选择 File Templates。
点击MXML Web Application 将其作为 File Type。参见图 1。
点击Edit并且删除${min_size}。
点击OK两次。
图1. 从MXML Web Application 文件模板中删除min_size变量
有些容器能够支持嵌套 layout标签以覆盖表1中所示的 默认布局，它们仅仅包含作为子组件的 layout 标签。 允许你进行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。
布局形象化和布局属性
通常，如果一个概念能够栩栩如生地展现出来，则它易于快速地被人们接受—正如谚语所言：一副图画胜过千言万语。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的拥有者，他们已经画出三幅对说明Flex 4的HorizonalLayout （参见图 2） 、Vertical Layout （参见图 3）以及TileLayout （参见图 4）很有帮助的示意图。他们还展示了如何应用属性，例如填充（paddingLeft）、对齐(horizontalAlign) 以及gap等。 你可以下载这些查看PDF*。 请在下载之后欣赏他们这些令人叫绝的自定义Flex 4布局。
图2. Flex 4的HorizontalLayout
图3. Flex 4的VerticalLayout
图4. Flex 4的TileLayout
GROUP容器滚动
在Flex 3中，滚动功能内置于组件；而在 Flex 4中，该功能的实现方式不同。 因此，在 Flex 3和 Flex 4组件中，在如何处理滚动操作方面存在显著差异。 对Group 容器以及 Hgroup、Vgroup和 DataGroup 容器进行滚动操作的最佳方法是在一个Spark Scroller对象中包装容器。 关键之处是将Scroller的宽度和高度设置为你希望查看内容的尺寸。 你也可以设置滚动位置以便在相应范围的当前位置显示内容。 如果你没有设置宽度和高度，或将它们设置为大于内容的值，则滚动条将不会出现。 例如，考虑下列代码，它的任务是将Scroller的宽度和高度设置为图像的尺寸。
<?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" minWidth="955" minHeight="600">
<s:Scroller width="300" height="300">
<s:Group>
<mx:Image width="300" height="300"
source="@Embed(source='logo.png')"/>
</s:Group>
</s:Scroller>
</s:Application>
假如从Scroller对象中完全删除 width和 height ，则滚动条不会显示出来。参见图5。
图5. 由于Scroller和 Image 具有相同的尺寸，导致滚动条不可见
下列代码将显示具有水平滚动条的图像的左半部分，允许用户滚动到图像的另一半部分。参见图6。由于Scroller高度被默认设置为内容高度，故垂直滚动条将不会添加：
<?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" minWidth="955" minHeight="600">
<s:Scroller width="150">
<s:Group>
<mx:Image width="300" height="300"
source="@Embed(source='logo.png')"/>
</s:Group>
</s:Scroller>
</s:Application>
图6. 由于Scroller高度被设置为内容高度，导致垂直滚动条不可见
可植皮容器滚动
对于可植皮的容器，其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window，你应该将Scroller对象添加到围绕 contentGroup Group对象的skin类。 例如，下面是来自一个自定义SkinnableContainer MXML 皮肤的相关代码：
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" minWidth="0" minHeight="0" />
</s:Scroller>
另一个可选方法是在你的代码中将包围你的内容的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
表 2. 布局属性小结
下面代码定义两个容器，它们具有不同的布局和不同的属性，但显示相同的结果。参见图7：
<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:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement -->
<s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200">
<s:Label horizontalCenter="0" top="30"
text="Basic Layout using constraints on the object itself for layout."/>
</s:SkinnableContainer>
<!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement -->
<s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" >
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
</s:layout>
<s:Label text="VerticalLayout that specifies where the label is placed with properties."/>
</s:SkinnableContainer>
</s:Application>
图7. 两个容器具有使用不同技巧定位的内容
如果希望利用水平或垂直布局在一个容器中将子组件定位在中央位置或利用 Hgroup或 VGroup将子组件定位在中央位置，则可以使用horizontalAlign="center" 和verticalAlign="middle" 。
如果希望在一个具有基本或绝对布局的容器中将一个组件定位在中央位置，可以在需要定位在中央位置的组件中使用horizontalCenter="0" 和 verticalCenter="0" 。
下面两个代码范例使用不同技巧将一个对象定位在中央位置，它们产生的结果是相同的。
第一个范例（参见图 8）使用 horizontalAlign="center" 和verticalAlign="middle" ：
<?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:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/>
</s:Application>
图8. 使用 horizontalAlign="center" 和verticalAlign="middle"对红色正方形进行定位
第二个范例（参见图 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>
图9.使用 horizontalCenter="0" 和 verticalCenter="0"对红色正方形进行定位
通用技巧
最后，给出需要牢记的若干通用技巧：
总体来说， 应该选择使用限制条件 而不选择具有（x,y）值的绝对定位方式，因为限制条件可以动态地调整浏览器的大小。 当为web、桌面、手机和平板电脑设备开发跨平台的应用程序时，这一点更为重要，因为这些设备的屏幕尺寸变化较大。
一般来说，可以将 left/right 用于大小调整目的，而将 horizontalCenter 和verticalCenter 用于定位目的。
对于一般居中定位目的，特别是当启动最小尺寸窗口并且你希望对一个对象进行居中定位时，可以使用horizontalCenter。
注： 当不知使用哪个属性时，切换至 Design视图，以便在Property检查工具中查看哪些选项可以使用。 在Design视图中显示的属性将能够根据选择的组件和容器的布局进行切换。 这是一种仔细检查你正在执行的任务的很好的方式。[/size][/size]
本文适用于正在寻找使用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
表 1. Spark容器
在默认情形下，当你利用Flash Builder创建一个web应用程序，它将分别具有955 和600 的最小宽度和最小高度。 你可以在Flash Builder 中通过从File Template中删除minSize变量来改变这一设置。
在Flash Builder中，选择Flash Builder > Preferences。
展开Flash Builder 并且选择 File Templates。
点击MXML Web Application 将其作为 File Type。参见图 1。
点击Edit并且删除${min_size}。
点击OK两次。
图1. 从MXML Web Application 文件模板中删除min_size变量
有些容器能够支持嵌套 layout标签以覆盖表1中所示的 默认布局，它们仅仅包含作为子组件的 layout 标签。 允许你进行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。
布局形象化和布局属性
通常，如果一个概念能够栩栩如生地展现出来，则它易于快速地被人们接受—正如谚语所言：一副图画胜过千言万语。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的拥有者，他们已经画出三幅对说明Flex 4的HorizonalLayout （参见图 2） 、Vertical Layout （参见图 3）以及TileLayout （参见图 4）很有帮助的示意图。他们还展示了如何应用属性，例如填充（paddingLeft）、对齐(horizontalAlign) 以及gap等。 你可以下载这些查看PDF*。 请在下载之后欣赏他们这些令人叫绝的自定义Flex 4布局。
图2. Flex 4的HorizontalLayout
图3. Flex 4的VerticalLayout
图4. Flex 4的TileLayout
GROUP容器滚动
在Flex 3中，滚动功能内置于组件；而在 Flex 4中，该功能的实现方式不同。 因此，在 Flex 3和 Flex 4组件中，在如何处理滚动操作方面存在显著差异。 对Group 容器以及 Hgroup、Vgroup和 DataGroup 容器进行滚动操作的最佳方法是在一个Spark Scroller对象中包装容器。 关键之处是将Scroller的宽度和高度设置为你希望查看内容的尺寸。 你也可以设置滚动位置以便在相应范围的当前位置显示内容。 如果你没有设置宽度和高度，或将它们设置为大于内容的值，则滚动条将不会出现。 例如，考虑下列代码，它的任务是将Scroller的宽度和高度设置为图像的尺寸。
<?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" minWidth="955" minHeight="600">
<s:Scroller width="300" height="300">
<s:Group>
<mx:Image width="300" height="300"
source="@Embed(source='logo.png')"/>
</s:Group>
</s:Scroller>
</s:Application>
假如从Scroller对象中完全删除 width和 height ，则滚动条不会显示出来。参见图5。
图5. 由于Scroller和 Image 具有相同的尺寸，导致滚动条不可见
下列代码将显示具有水平滚动条的图像的左半部分，允许用户滚动到图像的另一半部分。参见图6。由于Scroller高度被默认设置为内容高度，故垂直滚动条将不会添加：
<?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" minWidth="955" minHeight="600">
<s:Scroller width="150">
<s:Group>
<mx:Image width="300" height="300"
source="@Embed(source='logo.png')"/>
</s:Group>
</s:Scroller>
</s:Application>
图6. 由于Scroller高度被设置为内容高度，导致垂直滚动条不可见
可植皮容器滚动
对于可植皮的容器，其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window，你应该将Scroller对象添加到围绕 contentGroup Group对象的skin类。 例如，下面是来自一个自定义SkinnableContainer MXML 皮肤的相关代码：
<s:Scroller width="100%" height="100%">
<s:Group id="contentGroup" minWidth="0" minHeight="0" />
</s:Scroller>
另一个可选方法是在你的代码中将包围你的内容的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
表 2. 布局属性小结
下面代码定义两个容器，它们具有不同的布局和不同的属性，但显示相同的结果。参见图7：
<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:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement -->
<s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200">
<s:Label horizontalCenter="0" top="30"
text="Basic Layout using constraints on the object itself for layout."/>
</s:SkinnableContainer>
<!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement -->
<s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" >
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
</s:layout>
<s:Label text="VerticalLayout that specifies where the label is placed with properties."/>
</s:SkinnableContainer>
</s:Application>
图7. 两个容器具有使用不同技巧定位的内容
如果希望利用水平或垂直布局在一个容器中将子组件定位在中央位置或利用 Hgroup或 VGroup将子组件定位在中央位置，则可以使用horizontalAlign="center" 和verticalAlign="middle" 。
如果希望在一个具有基本或绝对布局的容器中将一个组件定位在中央位置，可以在需要定位在中央位置的组件中使用horizontalCenter="0" 和 verticalCenter="0" 。
下面两个代码范例使用不同技巧将一个对象定位在中央位置，它们产生的结果是相同的。
第一个范例（参见图 8）使用 horizontalAlign="center" 和verticalAlign="middle" ：
<?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:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/>
</s:Application>
图8. 使用 horizontalAlign="center" 和verticalAlign="middle"对红色正方形进行定位
第二个范例（参见图 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>
图9.使用 horizontalCenter="0" 和 verticalCenter="0"对红色正方形进行定位
通用技巧
最后，给出需要牢记的若干通用技巧：
总体来说， 应该选择使用限制条件 而不选择具有（x,y）值的绝对定位方式，因为限制条件可以动态地调整浏览器的大小。 当为web、桌面、手机和平板电脑设备开发跨平台的应用程序时，这一点更为重要，因为这些设备的屏幕尺寸变化较大。
一般来说，可以将 left/right 用于大小调整目的，而将 horizontalCenter 和verticalCenter 用于定位目的。
对于一般居中定位目的，特别是当启动最小尺寸窗口并且你希望对一个对象进行居中定位时，可以使用horizontalCenter。
注： 当不知使用哪个属性时，切换至 Design视图，以便在Property检查工具中查看哪些选项可以使用。 在Design视图中显示的属性将能够根据选择的组件和容器的布局进行切换。 这是一种仔细检查你正在执行的任务的很好的方式。[/size][/size]
扫一扫
7486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
