在學習Flex的過程中，你可能會遇到Flex最優布局這樣的問題，本文向大家介紹一下Flex最優布局方案，比如開發時的布局與最后在瀏覽器里看到的有很大出入,今天這個帖子是專門針對這類問題的，希望對你有所幫助。

Flex最優布局

當你在做MXMLApplication的時候,我再補充一下Designarea的相關事宜.

◆Designarea:1012*600

適合于所有內容剛好在1012*600這個范圍里的應用程序,這樣的應用程序在IE7.0里剛好滿屏顯示.

◆Designarea:996*X(X>600)

適合于高度大于600的應用程序,只要內容在996的寬度以內,高可以無限,這樣的應用程序在IE7.0里有豎向滾動條(無橫向).

最后記住,無論何時都不要設置<mx:Application>的寬和高,只設置Designarea的寬和高,只有這樣Flex應用程序才能在瀏覽器里有最大的伸縮性.

Flex最優布局方案

最近很有朋友都對Flex布局有問題,比如開發時的布局與最后在瀏覽器里看到的有很大出入,今天這個帖子是專門針對這類問題的,以下都是我自己的經驗,請笑納.

Flex最優布局方案:

1.如果你愿意的話,請將操作系統分辨率調整到1024*768(這是最佳的),如果你不愿意也可以,但是你的操作系統分辨率不能低于1024*768.

2.下載InternetExplorer7.0---→http://www.microsoft.com/china/windows/ie/downloads/default.mspx
安裝完成后,讓IE7.0做為Flex的默認瀏覽器,Flex所有項目都在IE7.0里測試.

3.當你新建一個MXMLApplication文件的時候,不要忙著做東西,在Design模式下,找到Designarea(就在舞臺的右上角),打開列表,點Customsize,然后設置Width:1012,Height:600,完成后按OK.這里要注意的是,千萬不要設置<mx:Application>的寬高屬性,因為這樣才可以讓Flex應用程序在瀏覽器里有最大的伸縮性.

4.打開Flex幫助,學習GettingStartedwithFlex2>Lessons>CreateaConstraint-basedLayout這一節(并不多,也不難),學會怎樣使用布局約束(Constraint),在Flex的可視組件里,除了<mx:Application>沒有布局約束以外,其他的容器或者組件都有布局約束.我個人建議布局約束應該適當的使用,沒有必要所有組件和容器全部都用上約束,你把組件放在容器里,把這個容器和其中的幾個重要組件設置約束就可以了.

5.在你使用自定義組件的時候(這里我指的是可視化自定義組件),這樣的自定義組件都是建立在Flex內置組件和容器的基礎上的,當你建立MXMLComponent文件時(比如以Panel容器為基礎),它會默認設置Panel的寬和高,請清除這2個值,不指定寬高,Layout永遠設置為absolute.打開這個MXMLComponent文件,請參照第3步里的方法,將Designarea設置為你想要的大小(這里的值你自定義,并不一定要1012*600,因為MXMLComponent最終是要放在MXMLApplication中的),而不要去設置Panel本身的寬和高,這樣可以讓自定義組件在Application里有最大的伸縮性.

好了,這是我總結的5點,這樣做出來的Flex應用程序,所見即所得,而且伸縮性強,兼容性強,即使用戶的分辨率和瀏覽器窗口的大小都不相同,你的Flex應用程序也可以自動伸縮,祝大家開發愉快!

【編輯推薦】

1. 技術分享 用FlexBuilder創建Flex項目
2. Flex基礎 創建第一個Flex項目
3. 解析Flex事件執行流程
4. FlexBuilder3.0與Eclipse3.4的完美結合
5. 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件