解析Flex最优布局解决方案-flex布局flex:1

在学习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应用程序也可以自动伸缩,祝大家开发愉快!

【编辑推荐】