在學(xué)習(xí)Flex的過(guò)程中，你可能會(huì)遇到Flex最優(yōu)布局這樣的問(wèn)題，本文向大家介紹一下Flex最優(yōu)布局方案，比如開(kāi)發(fā)時(shí)的布局與最后在瀏覽器里看到的有很大出入,今天這個(gè)帖子是專門(mén)針對(duì)這類問(wèn)題的，希望對(duì)你有所幫助。

Flex最優(yōu)布局

當(dāng)你在做MXMLApplication的時(shí)候,我再補(bǔ)充一下Designarea的相關(guān)事宜.

◆Designarea:1012*600

適合于所有內(nèi)容剛好在1012*600這個(gè)范圍里的應(yīng)用程序,這樣的應(yīng)用程序在IE7.0里剛好滿屏顯示.

◆Designarea:996*X(X>600)

適合于高度大于600的應(yīng)用程序,只要內(nèi)容在996的寬度以內(nèi),高可以無(wú)限,這樣的應(yīng)用程序在IE7.0里有豎向滾動(dòng)條(無(wú)橫向).

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

Flex最優(yōu)布局方案

最近很有朋友都對(duì)Flex布局有問(wèn)題,比如開(kāi)發(fā)時(shí)的布局與最后在瀏覽器里看到的有很大出入,今天這個(gè)帖子是專門(mén)針對(duì)這類問(wèn)題的,以下都是我自己的經(jīng)驗(yàn),請(qǐng)笑納.

Flex最優(yōu)布局方案:

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

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

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

4.打開(kāi)Flex幫助,學(xué)習(xí)GettingStartedwithFlex2>Lessons>CreateaConstraint-basedLayout這一節(jié)(并不多,也不難),學(xué)會(huì)怎樣使用布局約束(Constraint),在Flex的可視組件里,除了<mx:Application>沒(méi)有布局約束以外,其他的容器或者組件都有布局約束.我個(gè)人建議布局約束應(yīng)該適當(dāng)?shù)氖褂?沒(méi)有必要所有組件和容器全部都用上約束,你把組件放在容器里,把這個(gè)容器和其中的幾個(gè)重要組件設(shè)置約束就可以了.

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

好了,這是我總結(jié)的5點(diǎn),這樣做出來(lái)的Flex應(yīng)用程序,所見(jiàn)即所得,而且伸縮性強(qiáng),兼容性強(qiáng),即使用戶的分辨率和瀏覽器窗口的大小都不相同,你的Flex應(yīng)用程序也可以自動(dòng)伸縮,祝大家開(kāi)發(fā)愉快!

【編輯推薦】

1. 技術(shù)分享 用FlexBuilder創(chuàng)建Flex項(xiàng)目
2. Flex基礎(chǔ) 創(chuàng)建第一個(gè)Flex項(xiàng)目
3. 解析Flex事件執(zhí)行流程
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 學(xué)習(xí)筆記 FlexBuilder2.0中如何使用基于Lists的控件