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