常見Flex控件用法剖析

本文和大家重點討論一下Flex控件的用法,Flex控件分爲2種,一種是佈局控件,另外一種是元素控件。比如Canvas控件,Canvas容器繪置一個長方形的區域用來放置子組件(其他容器或者控件)。

Flex控件詳解

Flex控件分爲2種,一種是佈局控件,另外一種是元素控件。請看下文詳細介紹。

◆Canvas

Canvas容器繪置一個長方形的區域用來放置子組件(其他容器或者控件),與其他容器不同,Canvas子組件的位置必須指定絕對座標或使用約束條件佈局。

◆Box,HBox,andVBox

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

◆ControlBar

Flex控件中ControlBar容器一般與Panel容器或者TitleWindow容器配合使用,比如在Panel容器的底部放置一個ControlBar作爲Footer。

◆ApplicationControlBar

ApplicationControlBar容器一般起到導航的作用,作用於整個應用程序的運行期間,比如我們使用的Word,Excel頂部用來放置工具欄和菜單欄的區域。
ApplicationControlBar容器有2種模式,分別是Docked模式和Normal模式。Docked模式將ApplicationControlBar容器一直顯示的停靠在應用程序的頂部,並且自動將寬度調整爲應用程序的寬度。Normal模式可以將ApplicationControlBar容器以任意的大小放置在應用程序的任何位置。

◆DividedBox,HDividedBox,andVDividedBox

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

◆Form,FormHeading,andFormItem

Form是Web應用最爲常見的容器了,常見的有用戶註冊,帳單信息等。FormHeading用來區分每一組Form信息,如用戶註冊的過程中,可以指定2個FormHeading分別是必添項目和選添項目。FormItem是Form中具體的某一個項目,包含一個Label和若干個控件。

◆Grid

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

◆Panel

Panel容器是Flex控件中一個比較常用的容器,包含標題(title)區域,放置子組件的容器(content)區域,以及邊框(border)。content區域有3種形式,分別是橫向佈局(horizontal),縱向佈局(vertical),絕對座標佈局(absolute)。Panel會很普遍的與Form結合起來使用,當然還有前面提到的ControlBar組件也是Panel容器中很常用的一個子容器。

◆Tile

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

◆TitleWindow

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章