您现在的位置: 365建站网 > 365学习 > Flex 3 布局容器学习笔记

Flex 3 布局容器学习笔记

文章来源:365jz.com     点击数:517    更新时间:2009-10-12 09:42   参与评论

赖勇浩( http://laiyonghao.com

国庆期间,做了不少基于 flex 的开发工作,对 flex 的布局容器有了进一步深入的理解,也找到不少非常棒的文章,分享到这里方便一下大家。

很好的文章

Flex3 界面布局教程 (1)

http://blog.chinaunix.net/u/21684/showart_691988.HTML

Flex3 界面布局教程 (2)

http://blog.chinaunix.net/u/21684/showart_692022.html

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

基本上看完前三篇,这方面就能搞得很好了;最后一篇是官方的关于布局容易的手册,有空的时候看看,可以了解更多细节。下面开始分享我的学习笔记(有润色),内容没有脱离上面的四篇文章,没兴趣的朋友可以跳过不看了。

定位模式

要想弄明白 flex 的界面布局,就有必要先弄明白它的定位模式。 flex 的自由之处在于你可以在 mXML 里写上许多定位模式的代码,当这些定属性发生冲突时,它会自动根据优先级来执行优先级最高的定属性。你不用担心记不住这些优先级, flex 这个 IDE 在检测到冲突时,会在 problem 框里显示一个警告,这样你可以去掉优先级比较低的定位属性了。

众多的定位模式中第一个是绝对模式,即你通过确定的数值来设定 x y width height 属 性;使用绝对模式你需要知道你的控件摆在哪个位置和确定它的大小,显然地这很难让你的客户方便地获得适应客户屏幕和习惯的布局,所以我们更常用的是自动定 位;自动定位仍然不够灵活,这时我们可以使用基于约束的布局,顾名思义,这是一种通过描述其与容器的关系来实现布局的方法,通过使用子组件的 top bottom left right horizontalCenter verticalCenter 样式属性来指定限制。关于这方面的更多内容,可以通过上面推荐的第三篇文章来了解。

HBoxVBox Spacer

这两个 Box 类是“看不见”的控件,用来约束其中的组件布局。如果你用过 wxWidgets 那一定对它们相当熟悉了,这种基于 Box 的布局方法加上约束属性,可以很容易地做出随着父控件的大小变化而相应地保持比例的变化,唉啊,想起当年用 MFC 实现这样的效果,我写了多少代码,调试了多少个夜晚啊!

Box 控件中,某两个控件之间的距离由 verticalGap 属性设定,默认值并不是 0 ,所以如果你想把两个控件紧挨在一起,需要手动把它设置为 0 ;如果你想单独地调整某两个控件间的间隔,那么可以使用“看不见的看得见的”控件 Spacer 来隔开它, Spacer 在界面上显示为一个纯透明的组件,所以看不见,但又能起到空白的作用,所以又看得见,它的 width height 属性可以相对应地让 HBox VBox 控制的组件更加漂亮。

ApplicationControlBar

如果你用 Win32 SDK MFC 界面编程的经历,你一定为“在工具栏上加一个 ComboBox Edit 的需求”而抓狂过吧?现在不用怕了,来到 flex 的世界,像这种问题,用 ApplicationControlBar 是相当相当地小 case 。看看下面这个图多复杂,用了它,就是一个 1 + 1 = 2 的小 case 了。


DividedBoxHDividedBox 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

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (517人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------