Flex SDK 4(Gumbo)改善的Layout和Scroller（一）

Flex SDK 4(Gumbo)在佈局（Layout）和可視區域（Scroller）上面與Flex SDK 3還是有些差異性的，如果用戶不瞭解這些差異性，會在實際相中出現奇怪的問題。因此我們需要深入瞭解一下Flex SDK 4(Gumbo)的佈局方式（Layout）和可視區（Scroller）的事情。

本篇文章描述的內容是佈局（Layout）
在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>
................................................................................

附錄：（Flex SDK 4(Gumbo) spark組件中比較常見的容器）
1、Group：
相當於Canvas、默認是BasicLayout方式）
2、HGroup：
相當於HBox，因此只有一種佈局方式：HorizontalLayout佈局。
3、VGroup：
相當於VBox，因此只有一種佈局方式：VerticalLayout佈局。
4、Panel：
與Flex SDK 3的Panel在作用上是一樣的，默認佈局方式是BasicLayout佈局。