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>