FLEX4布局(转)

在FLEX4中有四个Flex框架布局类：BasicLayout、HorizontalLayout、TileLayout和VerticalLayout.这四个布局类可以应用到各种容器‍（Containers）中
　　BasicLayout类将基于x和y绝对属性显示容器中的所有内容（也就是所谓的绝对定位，通过设定XY轴值来定位）；

　　HorizontalLayout类将所有内容水平方向彼此相邻放置。也就是水平摆放各个对象元素
　　TileLayout类将并列显示容器中的所有子内容。以相同宽度并排摆放，取最大宽度
　　VerticalLayout类将所有子内容彼此在垂直方向布置好。

 

四种布局概述
   在Flex SDK 4(Gumbo)的spark组件库里面增加了一个page：spark.layouts。
   其中包括了比较重要的四个布局class，分别是：BasicLayout、HorizontalLayout、TileLayout、VerticalLayout

1、BasicLayout：（默认属性，当不指定定位后，则是绝对定位布局）
   这是spark组件默认Flex SDK 3的布局方式，即绝对定位布局。
   在Flex SDK 3 里面对应的是：layout="absolute"

2、HorizontalLayout：
   这是spark组件库里面的水平布局方式。
   在里面对应的是：layout="horizontal"

3、VerticalLayout：
   这是spark组件库里面的竖直布局方式。
   在Flex SDK 3 里面对应的是：layout="vertical"

4、TileLayout：
   这是spark组件库新增的布局方式，即格子布局方式。
   TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。

还有一点是需要注意的：
   paddingLeft、paddingRight、paddingTop、paddingBottom
   这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与Flex SDK 3有些区别。也就是说，在spark组件中的容器，已经不具备paddingLeft、paddingRight、paddingTop、 paddingBottom属性了。

关于如何使用布局功能：
<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/halo"
      width="100%" height="100%">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>
................................................................................

上面的布局解释为：
1、在s:Application下面的布局方式。
2、s:VerticalLayout指定为垂直布局。
   如果将<s:layout>.....</s:layout>定义在某个容器里面，那么就是针对于某个容器而定义的布局。

例如：
<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/halo"
      width="100%" height="100%">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>

      <s:Panel width="400" height="400" title="Panle">

      <s:layout>
            <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
      </s:layout>

2.spark组件中比较常见的容器
1、Group：
   相当于Canvas、默认是BasicLayout方式）
2、HGroup：
   相当于HBox，因此只有一种布局方式：HorizontalLayout布局。
3、VGroup：
   相当于VBox，因此只有一种布局方式：VerticalLayout布局。
4、Panel：
   与Flex SDK 3的Panel在作用上是一样的，默认布局方式是BasicLayout布局。

3.可视区域（Scroller）
   或者又叫滚动显示组件区域。
   这是Flex SDK 4(Gumbo) spark新增的组件，就是用于当Scroller里面的内容边界超出Scroller后，以便显示滚动条。

让我们看一个片段代码。
<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/halo"
      width="100%" height="100%">
       ........................................................................................................
      <s:Panel width="400" height="100" title="Panle">
            <s:layout>
                  <s:VerticalLayout horizontalAlign="center" paddingTop="30"/>
            </s:layout>
            <s:VGroup width="100%" height="100%">
                  <s:Button width="200" label="tesing1" />
                  <s:Button width="200" label="tesing2" />
                  <s:Button width="200" label="tesing3" />
            </s:VGroup>
      </s:Panel>
</s:Application>

上图可以看出，VGroup 中的三个按钮超出了panel窗体，而没有出现滚动条，通过下面给VGroup添加滚动条，使其在父窗体panel内。
        <s:Scroller width="100%" height="100%">
            <s:VGroup width="100%" height="100%">
                <s:Button width="200" label="tesing1" />
                <s:Button width="200" label="tesing2" />
                <s:Button width="200" label="tesing3" />
            </s:VGroup>
        </s:Scroller>
可以使用BorderContainer类来为容器增加更多外观设置选项：比如增加背景颜色设置！加一个圆角的边框等等

 

代码如下：

‍<s:BorderContainer borderWeight="4" borderColor="#417DE1" cornerRadius="24" left="20" top="20" backgroundColor="#F576FD" backgroundAlpha="0.25">

‍<s:Group y="24" width="744" height="408" x="67">
    <s:layout>
     <s:TileLayout/>
    </s:layout>

....控件省略.....

‍</s:Group>
</s:BorderContainer>