Flex 3 布局容器学习笔记 整理

所属分类: 网页制作 / Flash 阅读数: 1651
收藏 0 赞 0 分享

很好的文章
Flex3 界面布局教程 (1)
https://www.jb51.net/article/20349.htm
Flex3 界面布局教程 (2)
https://www.jb51.net/article/20350.htm
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 样式属性来指定限制。关于这方面的更多内容,可以通过上面推荐的第三篇文章来了解。

HBox 、VBox 和 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 了。 
  
DividedBox 、HDividedBox 和 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 。

更多精彩内容其他人还在看

利用asp或jsp,flash怎样把数据库中的一张表中的所有记录读取并显示出来

利用asp或jsp,flash怎样把数据库中的一张表中的所有记录读取并显示出来
收藏 0 赞 0 分享

Flash 中"设为首页"代码

Flash 中"设为首页"代码
收藏 0 赞 0 分享

FLEX TitleWindow之间数据传输的示例

在Flex里,一般的弹出窗口(除了Alert以外)都可以用TitleWindow组件完成,主窗口和TitleWindow的数据传输可以用以下方法
收藏 0 赞 0 分享

FLEX 仿Google联想框效果

FLEX--仿Google联想框效果--现在好多地方都用到了这样的效果,当然,现在Google下线了,不让用了,但是跟网上说的一样,想办法,它还是能出来的
收藏 0 赞 0 分享

FLEX 日期时间操作

找了很久,还是没有找到包含时间以下的东西,算了,还是麻烦一点,用日期加时间来处理吧.这里需要注意的是,它的时间日期跟其他语言是差不多的.所以要注意进行处理.
收藏 0 赞 0 分享

Flex 自动获取焦点 监听全局键盘事件

Flex 编程注意之自动获取焦点、监听全局键盘事件
收藏 0 赞 0 分享

Flex 编程注意之性能优化、垃圾回收的一些总结

自从开始做Flex、ActionScript 3.0的项目,我就一直与垃圾回收、性能优化这些问题打交道,因此也总结了一些优化的方案,同时在一些QQ群中也得到了一些“高人”的指点,因此将此内容记录一下。
收藏 0 赞 0 分享

Flex CategoryAxis 字体样式修改

Flex编程注意之修改CategoryAxis的字体样式(大小、颜色、粗斜体等)
收藏 0 赞 0 分享

Flex 编程注意之Flex Complier参数

由于上一篇文章《Flex编程注意之Namespace的用法》引出了Flex编译时自带的两个参数:-namespace -include-namespace,正好想到可以写一篇关于Flex Complier时的一些自定义参数。
收藏 0 赞 0 分享

Flex Namespace的用法

自定义自己组件的namespace呢 去Adobe那边的compiler参数查找了一下,发现可以利用-namespace、-include-namespaces这两个参数来指定自己的URL。
收藏 0 赞 0 分享
查看更多