本文和大家重點(diǎn)討論一下Flex控件的用法，F(xiàn)lex控件分為2種，一種是布局控件，另外一種是元素控件。比如Canvas控件，Canvas容器繪置一個(gè)長方形的區(qū)域用來放置子組件（其他容器或者控件）。

Flex控件詳解

Flex控件分為2種，一種是布局控件，另外一種是元素控件。

Canvas

Canvas容器繪置一個(gè)長方形的區(qū)域用來放置子組件（其他容器或者控件），與其他容器不同，Canvas子組件的位置必須指定絕對坐標(biāo)或使用約束條件布局。

Box,HBox,andVBox

Box容器用來橫向或者縱向的放置子組件，使用direction屬性來決定是橫向布局還是縱向布局。HBox,VBox就是指定了direction屬性的Box。

ControlBar

Flex控件中ControlBar容器一般與Panel容器或者TitleWindow容器配合使用，比如在Panel容器的底部放置一個(gè)ControlBar作為Footer。

ApplicationControlBar

ApplicationControlBar容器一般起到導(dǎo)航的作用，作用于整個(gè)應(yīng)用程序的運(yùn)行期間，比如我們使用的Word,Excel頂部用來放置工具欄和菜單欄的區(qū)域。
ApplicationControlBar容器有2種模式，分別是Docked模式和Normal模式。Docked模式將ApplicationControlBar容器一直顯示的停靠在應(yīng)用程序的頂部，并且自動(dòng)將寬度調(diào)整為應(yīng)用程序的寬度。Normal模式可以將ApplicationControlBar容器以任意的大小放置在應(yīng)用程序的任何位置。

DividedBox,HDividedBox,andVDividedBox

DividedBox容器類似與Box容器，用來橫向或者縱向的放置子組件，不同的是DividedBox用顯示的間隔物將自組件分割開，你可以拖動(dòng)間隔物來擴(kuò)大或縮小每個(gè)子組件所占的空間，HDividedBox和VDividedBox相與DivideBox的區(qū)別與HBox和VBox相對與Box的區(qū)別一樣。

Form,FormHeading,andFormItem

Form是Web應(yīng)用最為常見的容器了，常見的有用戶注冊，帳單信息等。FormHeading用來區(qū)分每一組Form信息，如用戶注冊的過程中，可以指定2個(gè)FormHeading分別是必添項(xiàng)目和選添項(xiàng)目。FormItem是Form中具體的某一個(gè)項(xiàng)目，包含一個(gè)Label和若干個(gè)控件。

Grid

Grid容器用來以表格的形式放置組件，好比Html中沒有Border的Table。Grid容器的每一個(gè)單元格(cell)都可以放置0個(gè)或1個(gè)子組件，如果想要在一個(gè)單元格中放置多個(gè)控件，那么就在這個(gè)單元格中再多加一個(gè)容器。Grid中使用GridRow來創(chuàng)建行，用GridItem來創(chuàng)建單元格。類似與Html的table，你也可以使用rowSpan,colSpan來合并單元格。

Panel

Panel容器是Flex控件中一個(gè)比較常用的容器，包含標(biāo)題(title)區(qū)域，放置子組件的容器(content)區(qū)域，以及邊框(border)。content區(qū)域有3種形式，分別是橫向布局(horizontal)，縱向布局(vertical)，絕對坐標(biāo)布局(absolute)。Panel會(huì)很普遍的與Form結(jié)合起來使用，當(dāng)然還有前面提到的ControlBar組件也是Panel容器中很常用的一個(gè)子容器。

Tile

Tile容器將子組件按照表格的形式放置，與Grid容器的區(qū)別是，Tile容器每個(gè)單元格的大小都是一樣的。Tile容器子組件具體的放置位置由Flex來安排，而Tile容器的宗旨是將所有的子組件都能以橫豎排列最佳的位置擺放。比如Tile容器有16個(gè)子組件，就將16個(gè)子組件以4行4列的位置擺放，如果是15個(gè)子組件，也是4行4列擺放，只不過最后一行的最后一列是空著的。

TitleWindow

TitleWindow容器繼承與Panel容器，所以TitleWindow擁有Panel的所有特性，而不同的是TitleWindow容器是用來做彈出(popup)面板的。

【編輯推薦】

1. 詳解Flex控件拖動(dòng)技術(shù)
2. Flex安全沙箱問題解決方法
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 解析Flex全屏模式設(shè)置方法
5. Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則