原文地址：?http://readwall.blog.163.com/blog/static/1012713220108942042885/
1.四种布局概述
? ?在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>
