在Flash Builder 中,我們可以使用containers (容器)跟layout objects.(版面物件)來做幾乎是全部的版面排版,之前提到Flash Builder 可以輕鬆的用來為您的應用程式製做UI(使用者界面),也是因為它在這方面提供了便利又強大的功能.
在技術層面上，容器只是一種特殊類型的組件，它包含和Group 群組和其他項目。Group群組內包括的這些項目我們統稱為子元件，或者更明白地說，LayoutElements 版面元件（這僅僅是一個廣泛的術語元件如按鈕，複選框和等）和GraphicalElements 圖形元件如正方形，圓形等。雖然group 群組將它們收納在在一起，但它們不會知道
這些項目在螢幕上的位置或順序。
當您選擇一個容器來使用，你基本上要做的是設置他們精確的座標位置,然而容器最廣泛應用的功能是它能夠被
skinning殖皮或換膚(內地的翻譯是翻成:"蒙皮". 總之就像你把你的手機拿去做封膜一樣,容器的外觀是可以被改變成你想要的樣子。
skinning 植皮/換膚 是定義視覺外觀組件的處理步驟。在一個容器上，你能想到的外觀包括如背景，邊框，陰影，等等。一些Flex的容器可以植皮，這意味著你可以定義它們在屏幕上顯示的樣子。其他容器存在只是為了確保聚攏它們的子元件，他們自己沒有一個視覺外觀。也就是說不是所有容器都可以植皮,能夠植皮的條件是至少它們必需是一個視覺外觀組件.
容器的類別有下述幾種:
Group 群組容器: 在Flex 4 中最簡單的類別,一個群組可以用來包括子元件,但它們沒有自己的視覺外觀..
SkinnableContainer 可植皮/換膚的容器: 一個可以換膚的容器的功能等同Group群組並且能夠用來定義營幕 上的視覺外觀 .
BorderContainer 外框容器: 也是一種可植皮/換膚的容器,它可以用來將子元件包覆在框內 .
Panel 平面容器: 也是一種可植皮/換膚的容器,它有個邊框包覆,它可以有一個控制橫列(Control bar),可設置標題列及控制區域 .
Application 應用容器:也是一種可植皮/換膚的容器,它通常應用在你的應用程式的根本層,像是Panel容器,它也可以擁有控制橫列(Control Bar) .
NavigationContent 導引欄容器: 也是一種可植皮換膚的容器.通常用ViewStack來控制,稍後會再提及它
介紹到這裏,接下來要提的是 Layout Object版面物件.
版面物件是與容器一起運作的,用來決定如何容器群組內的子元件如何顯示在螢幕上,flex 4 提供了幾種
版面物件你可以自由應用它來定義你想要展示的版面.
底下介紹幾種版面物件的用途
BasicLayout: basic layout基本版面配置,用來做為絕對定位用,你必需為每一個版面元件定義x 跟 y 的座標 .
HorizontalLayout: horizontal layout 水平版面配置,水平排列每一個子元件一個緊接另一個橫向排列 .
VerticalLayout: vertical layout 垂直版面配置,垂直排列每一個子元件一個緊接一個縱向排列 .
TileLayout: tile layout瓦狀版面配置,可視需求任意排列子元件成水平或垂直布置
底下分別列出兩個範例: 請你解釋給我聽這樣版面配置是怎麼組成的?
範例1:
- <s:Group>
- <s:layout>
- <s:HorizontalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
範列 2
- <s:Group>
- <s:layout>
- <s:VerticalLayout/>
- </s:layout>
- <s:Button label="1"/>
- <s:Button label="2"/>
- <s:Button label="3"/>
- </s:Group>
