Flex 3 布局容器學(xué)習(xí)筆記 整理
很好的文章
Flex3 界面布局教程 (1)
http://www.dbjr.com.cn/article/20349.htm
Flex3 界面布局教程 (2)
http://www.dbjr.com.cn/article/20350.htm
Flex 組件的定位和布局
http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/
Using Layout Containers
http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_07.html
基本上看完前三篇,這方面就能搞得很好了;最后一篇是官方的關(guān)于布局容易的手冊,有空的時候看看,可以了解更多細(xì)節(jié)。下面開始分享我的學(xué)習(xí)筆記(有潤色),內(nèi)容沒有脫離上面的四篇文章,沒興趣的朋友可以跳過不看了。
定位模式
要想弄明白 flex 的界面布局,就有必要先弄明白它的定位模式。 flex 的自由之處在于你可以在 mxml 里寫上許多定位模式的代碼,當(dāng)這些定屬性發(fā)生沖突時,它會自動根據(jù)優(yōu)先級來執(zhí)行優(yōu)先級最高的定屬性。你不用擔(dān)心記不住這些優(yōu)先級, flex 這個 IDE 在檢測到?jīng)_突時,會在 problem 框里顯示一個警告,這樣你可以去掉優(yōu)先級比較低的定位屬性了。
眾多的定位模式中第一個是絕對模式,即你通過確定的數(shù)值來設(shè)定 x 、 y 、 width 和 height 屬性;使用絕對模式你需要知道你的控件擺在哪個位置和確定它的大小,顯然地這很難讓你的客戶方便地獲得適應(yīng)客戶屏幕和習(xí)慣的布局,所以我們更常用的是自動定位;自動定位仍然不夠靈活,這時我們可以使用基于約束的布局,顧名思義,這是一種通過描述其與容器的關(guān)系來實現(xiàn)布局的方法,通過使用子組件的 top 、 bottom 、 left 、 right 、 horizontalCenter 或 verticalCenter 樣式屬性來指定限制。關(guān)于這方面的更多內(nèi)容,可以通過上面推薦的第三篇文章來了解。
HBox 、VBox 和 Spacer
這兩個 Box 類是“看不見”的控件,用來約束其中的組件布局。如果你用過 wxWidgets 那一定對它們相當(dāng)熟悉了,這種基于 Box 的布局方法加上約束屬性,可以很容易地做出隨著父控件的大小變化而相應(yīng)地保持比例的變化,唉啊,想起當(dāng)年用 MFC 實現(xiàn)這樣的效果,我寫了多少代碼,調(diào)試了多少個夜晚啊!
在 Box 控件中,某兩個控件之間的距離由 verticalGap 屬性設(shè)定,默認(rèn)值并不是 0 ,所以如果你想把兩個控件緊挨在一起,需要手動把它設(shè)置為 0 ;如果你想單獨(dú)地調(diào)整某兩個控件間的間隔,那么可以使用“看不見的看得見的”控件 Spacer 來隔開它, Spacer 在界面上顯示為一個純透明的組件,所以看不見,但又能起到空白的作用,所以又看得見,它的 width 和 height 屬性可以相對應(yīng)地讓 HBox 和 VBox 控制的組件更加漂亮。
ApplicationControlBar
如果你用 Win32 SDK 或 MFC 界面編程的經(jīng)歷,你一定為“在工具欄上加一個 ComboBox 或 Edit 的需求”而抓狂過吧?現(xiàn)在不用怕了,來到 flex 的世界,像這種問題,用 ApplicationControlBar 是相當(dāng)相當(dāng)?shù)匦?case ??纯聪旅孢@個圖多復(fù)雜,用了它,就是一個 1 + 1 = 2 的小 case 了。
DividedBox 、HDividedBox 和 VDividedBox
別說是用 MFC ,哪怕是用 wxWidgets ,做一個可以隨時拖放改變切分比例的分割組件也是困難的,但到了 Flex 的時代,一切都變得非常容易了,使用 DividedBox 及其子類可以像使用 Box 及其子類那樣方便地分割組件,下面就是一個活生生的例子,拖動中間的分隔條,可以隨時改變大小比例。、
除了這些以外,還有最常用的容器 Canvas 、 ApplicationControlBar 的基類 ControlBar 、很有 web 特色的 Form, FormHeading, and FormItem 、與 Box 類似的 Grid 、以及 Panel 、 Tile 和 TitleWindow ,這些類都可以在手冊里看到,還是那句話:有空的時候, read the fucking manuals ;工作的時候, google is your friend 。
相關(guān)文章
Flex與.NET互操作 了解FluorineFx的環(huán)境配置(遠(yuǎn)程對象、網(wǎng)關(guān)、通道、目的地)
Flex中的遠(yuǎn)程對象訪問,也就是服務(wù)端提供一個遠(yuǎn)程服務(wù)對象(RemotingService Object),在Flex客戶端通過相應(yīng)的訪問技術(shù)去調(diào)用遠(yuǎn)程對象的過程。2009-06-06Flex 創(chuàng)建一個自定義風(fēng)格的HRule或VRule
Flex中如何通過strokeWidth, strokeColor和shadowColor樣式,創(chuàng)建一個自定義風(fēng)格的HRule或VRule2009-06-06Flex DataGrid DataGridColumn數(shù)據(jù)顏色多樣化-類型替換
用得多了,發(fā)覺自己了解的真的是九牛之一毛都沒有,最近用到了從后臺讀出數(shù)據(jù)時顯示的問題,相信很多人都有用整形數(shù)據(jù)來代替字符串?dāng)?shù)據(jù)的情況2009-06-06