Flex 容器基本概念

申明文章出处：http://www.adobe.com/cn/devnet/flex/articles/flex-containers-tips.html

Flex 4 容器可以提供一套默认的布局：Basic、Horizontal或 Vertical以及能够基于容器内容的默认尺寸。当进行子组件对齐操作时，注意你正在使用的容器的最小和默认尺寸。参见表 1。有些容器是可植皮的，如果真是如此，则通过在它们的皮肤上添加Spark Scroller对它们进行滚动操作。

注意Basic 布局等同于 Flex 3的绝对布局（absolute layout ）。

此外，还应该注意 Spark 容器支持包含形状和FXG元素的 GraphicElement对象以及作为直接子组件的IVisualElement对象 UI 控件。但并不是所有的MX容器均是这种情形。

表 1. Spark容器

名称	最小尺寸	默认尺寸	默认布局	皮肤？	滚动条	注释
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

在默认情形下，当你利用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。

表 2. 布局属性小结

布局场景	在自身对象中使用属性		在父容器中使用属性
位于BasicLayout 绝对容器中的对象	Left, right, top, bottom	horizontalCenter, verticalCenter
位于Vertical、Horizontal或 TileLayout 容器中的对象			paddingLeft, paddingRight, paddingTop, paddingBottom	horizontalAlign, verticalAlign

        <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视图中显示的属性将能够根据选择的组件和容器的布局进行切换。这是一种仔细检查你正在执行的任务的很好的方式。