flex的最优布局

当你在做 MXML Application 的时候, 我再补充一下 Design area 的相关事宜.

Design area: 1012*600
适合于所有内容刚好在 1012*600 这个范围里的应用程序, 这样的应用程序在 IE 7.0 里刚好满屏显示.

Design area: 996*X (X>600)
适合于高度大于600的应用程序, 只要内容在996的宽度以内, 高可以无限, 这样的应用程序在 IE 7.0 里有竖向滚动条(无横向).

最后记住, 无论何时都不要设置<mx:Application>的宽和高, 只设置 Design area 的宽和高, 只有这样 Flex 应用程序才能在浏览器里有最大的伸缩性.

Flex 最优布局方案
最近很有朋友都对 Flex 布局有问题, 比如开发时的布局与最后在浏览器里看到的有很大出入, 今天这个帖子是专门针对这类问题的, 以下都是我自己的经验, 请笑纳.

Flex 最优布局方案:

1. 如果你愿意的话, 请将操作系统分辨率调整到 1024*768 (这是最佳的), 如果你不愿意也可以, 但是你的操作系统分辨率不能低于 1024*768.

2. 下载 Internet Explorer 7.0 ---→ http://www.microsoft.com/china/windows/ie/downloads/default.mspx
安装完成后, 让 IE 7.0 做为 Flex 的默认浏览器, Flex 所有项目都在 IE 7.0 里测试.

3. 当你新建一个 MXML Application 文件的时候, 不要忙着做东西, 在 Design 模式下, 找到 Design area (就在舞台的右上角), 打开列表, 点 Custom size , 然后设置 Width: 1012, Height: 600, 完成后按 OK . 这里要注意的是, 千万不要设置<mx:Application>的宽高属性, 因为这样才可以让 Flex 应用程序在浏览器里有最大的伸缩性.

4. 打开 Flex 帮助, 学习 Getting Started with Flex 2 > Lessons > Create a Constraint-based Layout 这一节(并不多, 也不难), 学会怎样使用布局约束(Constraint), 在 Flex 的可视组件里, 除了<mx:Application> 没有布局约束以外, 其他的容器或者组件都有布局约束. 我个人建议布局约束应该适当的使用, 没有必要所有组件和容器全部都用上约束, 你把组件放在容器里, 把这个容器和其中的几个重要组件设置约束就可以了.

5. 在你使用自定义组件的时候(这里我指的是可视化自定义组件), 这样的自定义组件都是建立在 Flex 内置组件和容器的基础上的, 当你建立 MXML Component 文件时(比如以 Panel 容器为基础), 它会默认设置 Panel 的宽和高, 请清除这2个值, 不指定宽高, Layout 永远设置为 absolute . 打开这个MXML Component 文件, 请参照第3步里的方法, 将 Design area 设置为你想要的大小(这里的值你自定义, 并不一定要1012*600, 因为 MXML Component 最终是要放在 MXML Application 中的), 而不要去设置 Panel 本身的宽和高, 这样可以让自定义组件在 Application 里有最大的伸缩性.

好了, 这是我总结的5点, 这样做出来的 Flex 应用程序, 所见即所得, 而且伸缩性强, 兼容性强, 即使用户的分辨率和浏览器窗口的大小都不相同, 你的 Flex 应用程序也可以自动伸缩, 祝大家开发愉快!

越来越喜欢 Flex 了:-)