About Layout in Flex, 關於Flex4中 (SDK4) 的排版

§About Layout in Flex4
在Flex4中，顯示元件的動作，樣式(Style)，外觀(Skin)，排版(Layout)都是抽離出來成為一個類別(Class)，如此做法更合乎了物件導向觀念能讓物件之間彼此更鬆散， 降低耦合，也更合乎了MVC，因此在Flex4中的顯示元件更顯得靈活好用。

上圖是Layout的類別關係圖，可以看到Flex4中具有四種原生的Layout類別，而這四種Layout類別都繼承了LayoutBase，由此父類來達到超型態(superType)作用，而如果你想要製作自己的Layout工具，繼承LayoutBase來開發自訂的Layout類。

• <s:BasicLayout/>　　　　絕對位置佈局
• <s:TileLayout/>
• <s:HorizontalLayout/>　　水平排列佈局
• <s:VerticalLayout/>　　　垂直排列佈局

如何使用：

　使用標籤或是layout屬性來設定，注意在標籤中如果是小寫這代了此標籤是屬性或方法，而layout他是一個屬性。


說明：
　在中的，其實他就是Application類的一個set get 封裝起來的屬性，他的接受型別是LayoutBase，任何繼承了LayoutBase的排版類都可使用。

範例：
<?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"
>

<!--這是Application的layout-->
　<s:layout>
　　<!--<s:BasicLayout/>-->
　　<!--<s:TileLayout/>-->
　　<!--<s:HorizontalLayout/>-->
　　<s:VerticalLayout/>
　</s:layout>
　<s:Button width="100" height="100" label="one"/>
　<s:Button width="100" height="100" label="two"/>
　<s:Button width="100" height="100" label="three"/>
　<s:Button width="100" height="100" label="four"/>
</s:Application>

當然你也可以這樣用
<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"
 layout="{new spark.layouts.HorizontalLayout}"
>

或是

• layout="{new HorizontalLayout} "
• layout="{new HorizontalLayout( )} "

或是在ActionScript中

• 　[目標物].layout = new HorizontalLayout( );