Flex元素佈局規則總結，以及佈局和容器 Flex_佈局和容器

1、Flex中的元素分類
從功能層面能夠把Flex中的元素分爲組件（Components）和容器（Containers）兩大類：
組件 - 是指那類具備明確交互或數據展現功能的元素，例如Button、Checkbox、Datagrid、List等。
容器 - 是指那類用來放置其餘元素的元素，容器每每不具備特定的交互功能，主要的功能就是容納元素。容器再細分又能夠分爲佈局（Layout）容器和導航（Navigator）容器，其中佈局容器的功能就是用來佈局界面元素的，例如Application、Panel等；導航容器主要用於進行功能性的導航，進行界面切換，例如TabNavigator等。

2、FLex中的佈局規則
FLex中的佈局即指佈局容器的佈局方式，按佈局特色能夠分爲兩大類：基礎佈局和特殊佈局。
基礎佈局 - 基於layout屬性和constraint-based的佈局，例如Application、Panel、Canvas等容器。
特殊佈局 - 基於容器的功能，不一樣的容器具備很是特徵明顯的佈局方式，例如Form、Grid、HDividedBox等。

基礎佈局

1. layout屬性
經過容器的layout屬性來設置佈局方式，主要包括如下幾種：
（1）vertical - 從上至下依次將子元素垂直放置在單一一列中，而水平對齊方式能夠經過horizontalAlign來設置，垂直對齊方式能夠經過verticalAlign來設置。
（2）horizontal - 從左至右依次將子元素水平放置在單一一行中，而水平對齊方式能夠經過horizontalAlign來設置，垂直對齊方式能夠經過verticalAlign來設置。
（3）absolute - 經過設置每一個子元素的x/y屬性來定位每一個子元素，而容器不會自動調整子組件的位置。若是沒有指定座標，則全部的子元素都繪製在容器的左上角。
2. constraint-based
在容器的layout屬性設置爲absolute的狀況下（Canvas除外，由於Canvas只有absoulte一種佈局方式，所以Canvas默認如此），可使用constraint-based佈局。這種佈局方式是經過子元素的4條側邊以及2條中心線與容器相應側邊和中心線的偏移量來決定子元素的定位的。相應的屬性設置以下：
（1）left - 子元素左邊離容器左側的距離
（2）right - 子元素右邊離容器右側的距離
（3）top - 子元素頂邊離容器頂部的距離
（4）bottom - 子元素底邊離容器底部的距離
（5）horizontalCenter - 子元素水平中心線相對於容器水平中心線的偏移量，正數表示向容器底部方向的偏移，負數表示向容器頂部方向的偏移。
（6）verticalCenter - 子元素垂直中心線相對於容器垂直中心線的偏移量，正數表示向容器右側的偏移，正數表示向容器左側的偏移。
*說明：horizontalCenter、verticalCenter的優先級比其餘四個屬性的優先級更高，即當設置了horizontalCenter、verticalCenter，其餘四個屬性將被忽略。此外，Constraint-based佈局必須在absolute的基礎佈局中才有效。因爲Canvas容器的佈局有且僅有absolute的，所以在Canvas中能夠直接使用Constraint-based佈局，而在其餘容器中須要將layout屬性設置爲absolute後Constraint-based佈局纔有效，並且使用了Constraint-based佈局後，設置x/y座標將再也不有意義。

特殊佈局

1. Box
在absolute佈局中，子元素的位置不會隨着容器的大小的變化而從新調整，這在窗口大小發生變化可能會對界面的佈局產生不可預料的影響，不少狀況下但願子元素的位置可以隨容器的大小變化而自動調整，Box佈局就能夠知足這個需求。
Box佈局分爲HBox和VBox,其中HBox佈局與設置容器layout爲horizontal是一致的，將子元素水平排列在一行中，而VBox則是將子元素垂直排在一列中。
2. DividedBox
分爲HDividedBox和VDividedBox，DividedBox會將子元素劃分爲一個獨立的分區，而且各個分區之間會存在一條調整欄，經過調整欄用於能夠手動的調整各個分區的大小。
3. Tile
將其子元素排成一個或多個豎列或橫行，在須要時增長新行或新列。將子元素水平放置時與HBox相似，不過不一樣的是tile並不將全部子元素放置在單獨一行，而是在即將超過tile的寬度時進行換行。
全部的Tile容器單元格大小都相同。
Flex將Tile容器的單元格排在正方形網格中，每個單元格內放入一個子元素。佈局方式由direction屬性決定。
4. Grid
與HTML中的Table很類似，能夠定義行數、列數，並選擇一個單元格來放置子元素。
5. Form
表單容器，用於構建表單，生成特定的表單佈局

 

 

 

 

Flex_佈局和容器

一、Halo組件也稱MX組件，是Flex3的獨有組件（按鈕、文本字段、容器等）。而Flex4引入了新一代的組件，稱爲Spark。
   Flex4同時支持Halo和Spark。可是不少Halo組件都有更新的Spark組件。

二、佈局種類
Spark都支持下面的任何一種佈局：
  - BasicLayout：絕對佈局。使用x，y座標。
  - HorizontalLayout：單行中橫向排列。
  - VerticalLayout：單列縱向排列。
  - TileLayout：網格形式顯示組件，建立儘量多的行和列。

三、絕對佈局
絕對佈局，使用x，y座標，容許控制元素的確切位置和大小。
容器的左上角表明座標原點（0，0）。（Flex中，x座標從左邊開始；y座標，從頂部開始。）
Application容器默認使用絕對佈局。

x，y座標爲負值時，組件會移到視覺範圍外。

四、基於約束的佈局
在難以肯定組件的精確座標時，能夠用絕對佈局模式中基於約束的佈局方式。基於約束的佈局是相對於容器的4個邊或容器的中心點來定位組件。
  - 4個邊: top，bottom，left，right
  - 中心點: horizontalCenter，verticalCenter
  - baseline：組件的上邊與容器的距離
優勢是，即便調整窗口大小也能夠保持組件的相對位置不變。

五、加強的約束佈局（Spark容器不支持，Spark組件支持）
能夠在水平和垂直方向上任意建立隱藏的輔助線，而後基於輔助線定位組件。
約束行和約束列的設定（<mx:constraintColumns> <mx:constraintRows>）：
  - 固定約束： 由絕對數字（像素）來指定
  - 相對約束： 根據容器大小的百分比來肯定
  - 內容大小約束： 約束行和約束列將和最大項目的大小相同

Halo的Canvas容器支持加強約束，Spark容器不支持加強約束，可是Spark組件能夠放到Halo容器中。

六、自動佈局
   自動佈局模式下，是將容器定向到位置元素中。
   1）使用佈局類
      Spark容器有4種佈局類，其中BasicLayout是絕對佈局，其它下面三種則提供了自動佈局選項：
        - HorizontalLayout
        - VerticalLayout
        - TileLayout  （自動網格佈局）

   2）使用空間
      <mx:Spacer/>組件能夠在佈局類指定的方向上，使組件隔開相對的距離。
      例： <mx:Spacer width=」50%」>      // 使組件平均地分開相對距離

七、容器
   1）Application
      一個應用程序只能有一個，是根容器。
      有個特點屬性preloader，是啓動Flex程序時的進度條。默認是On的，能夠Off。
      能夠裝載全局變量和函數。

   2）Canvas
      是一種最基本的容器，是Halo組件。在加強約束時使用。

   3）Group
      是一個簡單容器，和佈局類結合使用，默認BasicLayout佈局。
      子容器有Hgroup和Vgroup。

   4）SkinnableContainer 
      相似Group，支持換膚。

   5）Panel
      基於SkinnableContainer，特色在於添加了一個標題欄和一個框架，並默認給子對象繪製邊框。
      默認使用BasicLayout。

   6）ApplicationControlBar
      給程序添加了控制欄，和File菜單相似。要和Application容器結合使用。
      （ControlBar和它相似，可是效果很差，避免）

   7）DataGroup
      用於分組數據，可使用項渲染器渲染數據，從而自定義顯示。默認是BasicLayout。
      須要將數據發送給DataGroup的dataProvider。
      爲了顯示數據，可使用以下渲染器：
        - spark.skins.spark.DefaultItemRenderer：顯示爲簡單文本
        - spark.skins.spark.DefaultComplexItemRenderer：顯示爲Group容器內的組件。只有當數據包含視覺組件時纔有效。

   8) SkinnableDataContainer
      相似DataGroup，支持換膚.

   9）DividedBox、HDividedBox、VDividedBox
      這些是Halo組件，他們容許控制大小的調整。
      DividedBox支持經過direction屬性設置水平和垂直佈局方式。
      HDividedBox是水平佈局，VDividedBox是垂直佈局。

   10）Form
      方便佈局表單，純粹是佈局目的。
      它包含三個標籤
        - Form：主容器
        - FormHeader：可選，添加標題用
        - FormItem：將文本與每一個表單輸入字段關聯

   11）Grid
      相似HTML的表，頂級的Grid標籤用於標識網格的開始，GridRow用於插入行，GridItem用於向網格中輸入數據。

   下面是使用容器的簡單代碼（所用到的Skin代碼就省略了，FB默認作成的就行）：