Flex 容器基本概念
申明文章出處：http://www.adobe.com/cn/devnet/flex/articles/flex-containers-tips.html
Flex 4 容器可以提供一套默認的布局：Basic、Horizontal或 Vertical以及能夠基于容器內容的默認尺寸。 當進行子組件對齊操作時，注意你正在使用的容器的最小和默認尺寸。參見表 1。有些容器是可植皮的，如果真是如此，則通過在它們的皮膚上添加Spark Scroller對它們進行滾動操作。
注意Basic 布局等同于 Flex 3的絕對布局（absolute layout ）。
此外，還應該注意 Spark 容器支持包含形狀和FXG元素的 GraphicElement對象以及作為直接子組件的IVisualElement對象 UI 控件。 但并不是所有的MX容器均是這種情形。
表 1. Spark容器
| 0x0 | Content | Basic | ? | 包含于Scroller | 與Box相似但沒有skin/chrome |
| 0x0 | Content | Horizontal | ? | 包含于Scroller | 水平對齊條目；與Vbox相似但沒有skin |
| 0x0 | Content | Vertical | ? | 包含于Scroller | 垂直對齊條目；與Vbox相似但沒有skin |
| 0x0 | Content | Basic | ? | 包含于Scroller | 攜帶一個數據提供者和條目渲染器 |
| 0x0 | Content | Basic | X | 添加至skin | 包含式樣屬性 |
| 112x112 | 112x112 | Basic | X | 添加至skin | 包含式樣屬性 |
| 131x127 | Content | Basic | X | 添加至skin | 包含標題條 |
| 0x0 | 375x500 or all space in browser | Basic | X | 添加至skin | Web應用程序 |
| 0x0 | Content | Basic | X | 添加至skin | 用于導航容器 |
| 0x0 | 100x100 | Basic | X | 添加至skin | 只用于AIR |
| OS/chrome-specific | 100x375 | Basic | X | 添加至skin | 只用于AIR |
在默認情形下，當你利用Flash Builder創建一個web應用程序，它將分別具有955 和600 的最小寬度和最小高度。 你可以在Flash Builder 中通過從File Template中刪除minSize變量來改變這一設置。
有些容器能夠支持嵌套 layout標簽以覆蓋表1中所示的 默認布局，它們僅僅包含作為子組件的 layout 標簽。 允許你進行布局嵌套的容器包括Application、BorderContainer、Group、Panel和SkinnableContainer。
布局形象化和布局屬性
通常，如果一個概念能夠栩栩如生地展現出來，則它易于快速地被人們接受—正如諺語所言：一副圖畫勝過千言萬語。 Justin Shacklette和 Gilles Guillemin是 FlexLayouts.org的擁有者，他們已經畫出三幅對說明Flex 4的HorizonalLayout （參見圖 2） 、Vertical Layout （參見圖 3）以及TileLayout （參見圖 4）很有幫助的示意圖。他們還展示了如何應用屬性，例如填充（paddingLeft）、對齊(horizontalAlign) 以及gap等。 你可以下載這些查看PDF。 請在下載之后欣賞他們這些令人叫絕的自定義Flex 4布局。
圖2. Flex 4的HorizontalLayout圖3. Flex 4的VerticalLayout
圖4. Flex 4的TileLayout
Group容器滾動
在Flex 3中，滾動功能內置于組件；而在 Flex 4中，該功能的實現方式不同。 因此，在 Flex 3和 Flex 4組件中，在如何處理滾動操作方面存在顯著差異。 對Group 容器以及 Hgroup、Vgroup和 DataGroup 容器進行滾動操作的最佳方法是在一個Spark Scroller對象中包裝容器。 關鍵之處是將Scroller的寬度和高度設置為你希望查看內容的尺寸。 你也可以設置滾動位置以便在相應范圍的當前位置顯示內容。 如果你沒有設置寬度和高度，或將它們設置為大于內容的值，則滾動條將不會出現。 例如，考慮下列代碼，它的任務是將Scroller的寬度和高度設置為圖像的尺寸。
<?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">
?? <s:Scroller width="300" height="300"> ????? <s:Group> ???????? <mx:Image width="300" height="300" ???????????????? source="@Embed(source='logo.png')"/> ????? </s:Group> ?? </s:Scroller> </s:Application>
假如從Scroller對象中完全刪除 width和 height ，則滾動條不會顯示出來。參見圖5。
圖5. 由于Scroller和 Image 具有相同的尺寸，導致滾動條不可見
下列代碼將顯示具有水平滾動條的圖像的左半部分，允許用戶滾動到圖像的另一半部分。參見圖6。由于Scroller高度被默認設置為內容高度，故垂直滾動條將不會添加：
<?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">
?? <s:Scroller width="150"> ????? <s:Group> ???????? <mx:Image width="300" height="300" ???????????????? source="@Embed(source='logo.png')"/> ????? </s:Group> ?? </s:Scroller> </s:Application>
圖6. 由于Scroller高度被設置為內容高度，導致垂直滾動條不可見
可植皮容器滾動
對于可植皮的容器，其中包括 Spark Application、BorderContainer、 NavigatorContent、Panel和 Window，你應該將Scroller對象添加到圍繞 contentGroup Group對象的skin類。 例如，下面是來自一個自定義SkinnableContainer MXML 皮膚的相關代碼：
<s:Scroller width="100%" height="100%">?
? <s:Group id="contentGroup"? minWidth="0" minHeight="0" />?
</s:Scroller>
另一個可選方法是在你的代碼中將包圍你的內容的Scroller和 Group作為第一個子組件進行嵌套。 然而，首選方法是在skin類中保持Scroller的獨立狀態。 關于滾動和容器的更多詳細信息，參見 在 Spark容器中添加滾動條。
布局指南
下面是我在使用容器時遵循的若干指南：
- 如果對象的容器具有基本或絕對布局，則可以使用限制條件--例如 left、right、top 、bottom 、horizontalCenter和 verticalCenter 來確定其位置。
- 如果容器擁有具有layout 標簽或通過使用Hgroup或 Vgroup獲得的 垂直或水平布局，則可以使用horizontalAlign 、 verticalAlign 、gap 、 paddingTop 、 paddingBottom 、paddingLeft 和 paddingRight 屬性來控制子組件以及包圍它們的空白符。 這些屬性不能用于基本或絕對布局。參見表2。
表 2. 布局屬性小結
| 位于BasicLayout 絕對容器中的對象 | Left, right, top, bottom | horizontalCenter, verticalCenter | ? | ? |
| 位于Vertical、Horizontal或 TileLayout 容器中的對象 | ? | ? | paddingLeft, paddingRight, paddingTop, paddingBottom | horizontalAlign, verticalAlign |
<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"> ?? <s:layout> ????? <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> ?? </s:layout>
?? <!-- Container 1 has a BasicLayout (default) and uses constraints on the label itself for placement --> ?? <s:SkinnableContainer id="c1" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200"> ????? <s:Label horizontalCenter="0" top="30" ???????????? text="Basic Layout using constraints on the object itself for layout."/> ?? </s:SkinnableContainer>
?? <!-- Container 2 has a VerticalLayout with align and padding properties set on it for label placement --> ?? <s:SkinnableContainer id="c2" backgroundColor="0x000000" color="0xFFFFFF" width="420" height="200" > ????? <s:layout> ???????? <s:VerticalLayout horizontalAlign="center" paddingTop="30"/> ????? </s:layout> ????? <s:Label text="VerticalLayout that specifies where the label is placed with properties."/> ?? </s:SkinnableContainer> </s:Application>
圖7. 兩個容器具有使用不同技巧定位的內容
- 如果希望利用水平或垂直布局在一個容器中將子組件定位在中央位置或利用 Hgroup或 VGroup將子組件定位在中央位置，則可以使用horizontalAlign="center" 和 verticalAlign="middle" 。
- 如果希望在一個具有基本或絕對布局的容器中將一個組件定位在中央位置，可以在需要定位在中央位置的組件中使用horizontalCenter="0" 和 verticalCenter="0" 。
下面兩個代碼范例使用不同技巧將一個對象定位在中央位置，它們產生的結果是相同的。
第一個范例（參見圖 8）使用 horizontalAlign="center" 和 verticalAlign="middle" ：
<?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"> ?? <s:layout> ????? <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/> ?? </s:layout> ?? <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300"/> </s:Application>
圖8. 使用 horizontalAlign="center" 和verticalAlign="middle"對紅色正方形進行定位
第二個范例（參見圖 9）使用 horizontalCenter="0" 和 verticalCenter="0" ：
<?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"> ?? <s:BorderContainer borderColor="red" borderWeight="5" width="300" height="300" horizontalCenter="0" verticalCenter="0"/> </s:Application>
圖9.使用 horizontalCenter="0" 和 verticalCenter="0"對紅色正方形進行定位
通用技巧
最后，給出需要牢記的若干通用技巧：
- 總體來說， 應該選擇使用限制條件 而不選擇具有（x,y）值的絕對定位方式，因為限制條件可以動態地調整瀏覽器的大小。 當為web、桌面、手機和平板電腦設備開發跨平臺的應用程序時，這一點更為重要，因為這些設備的屏幕尺寸變化較大。
- 一般來說，可以將 left/right 用于大小調整目的，而將 horizontalCenter 和 verticalCenter 用于定位目的。
- 對于一般居中定位目的，特別是當啟動最小尺寸窗口并且你希望對一個對象進行居中定位時，可以使用horizontalCenter。
注： 當不知使用哪個屬性時，切換至 Design視圖，以便在Property檢查工具中查看哪些選項可以使用。 在Design視圖中顯示的屬性將能夠根據選擇的組件和容器的布局進行切換。 這是一種仔細檢查你正在執行的任務的很好的方式。
總結
以上是生活随笔為你收集整理的Flex 容器基本概念的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： POJ 3275 Ranking t
- 下一篇： dojo 官方翻译 dojo/_ba