Flex学习笔记1------页面布局

关注

原创最新推荐文章于 2025-05-23 21:05:23 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

现在许多公司招聘开始需要懂Flex，刚好本人现在上班的公司也需要会Flex技术，我就开始学习Flex，一本好的参考书是必不可少的，这里推荐美国人塔伯写的《Flex3权威指南》，一共527页，书中由浅入深的演示，在学习过程中几乎感觉不到任何困难。

今天看完了前4课，将中间部分重要的知识记录下来，方便复习巩固和交流。个人对Flex的第一印象是做出来的东西漂亮。暂时还没觉得有什么特别的优势，随着学习的深入，可能会体会到其他的优势。

1.搭建FLEX开发环境：

在MYECLIPSE8.5安装FLEX-Builder3插件方法：将FLEX-Builder3安装文件夹下的eclipse文件夹下的features和plugins两个文件夹拷贝到MYECLIPSE8.5安装文件夹下的myPlugin文件夹中，如果没有这个文件夹，自己建一个。然后在MYECLIPSE8.5安装文件夹下的

dropins文件夹中新建一个文本文档flexBuilder.txt，内容输入path=D://Flex Builder 3 Plug-in//com.adobe.flexbuilder.update.site，加下划线的部分替换成你FLEX-Builder3安装路径。然后将flexBuilder.txt重命名为flexBuilder.link,然后删掉MYECLIPSE8.5安装文件夹下的configuration下的org.eclipse.update删除，重启MYECLIPSE就可以看到已经集成了FLEX，至此，你就可以在MYECLIPSE中开发Flex了。

2.页面布局

如果用过可视化开发环境或者用过SWINGS，这个并不陌生，就是对页面进行分块。在开发过程中，我把几个需要注意的地方挑了出来：

打开自动编译：勾选上project菜单下的build automatically。

如果mx:Application的布局方式为水平或者垂直，将不能使用x和y指定其中空间的位置，所以，如果想通过XY坐标指定Application容器内的元素的位置，需要将Application的layout属性设置为Absolute.每一个Flex应用程序只能有一个<mx:Application>标签

需要熟悉各种容器的布局规则.:

ApplicationControlBar :能以HBox和VBox容器的方式布局，取决于direction属性（默认水平horizontal）该容器用来放置在整个应用程序都能访问的组件，如果ApplicationControlBar 是Application标签的第一个子元素且dock属性为true，则ApplicationControlBar

会停靠在应用程序绘制区域的顶部，占满应用程序的最大宽度，而且不随应用程序滚动而滚动，个人觉得ApplicationControlBar 这个特性适合做导航条和店铺LOGO。

ControlBar可用于将工具栏停靠在Panel和TitlewWindow容器的底部，其布局方式也由direction属性决定，ControlBar这个特性适合做版权之类的信息。

Panel可以像VBOX,HBOX或CANVAS容器之中的任何一种那样布局，这取决于layout属性，Panel出了可以包含子元素，还提供了标题栏区域，可以包含他的标题和状态信息。

Canvas按开发者指定的XY坐标绘制子元素，如果不指定XY，默认就是左上角（0,0）.

此外还有title，application，vbox，hbox等布局方式

基于约束条件的布局：正常的约束条件必须在允许绝对定位的容器（Canvas Panel module和application）中使用，增强型约束条件也是一样的，下面是原书中一段示例增强型约束的代码

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:constraintColumns>
  <mx:ConstraintColumn id="col1" width="33%"/>
  <mx:ConstraintColumn id="col2" width="33%"/>
  <mx:ConstraintColumn id="col3" width="33%"/>
</mx:constraintColumns>
<mx:constraintRows>
  <mx:ConstraintRow id="row1" height="50%"/>
  <mx:ConstraintRow id="row2" height="50%"/>
</mx:constraintRows>
<mx:TextArea id="ta1" left="col1:5" right="col1:5" top="row1:10" bottom="row1:20"/>
<mx:TextArea id="ta2" left="col1:5" right="col2:5" top="row2:10" bottom="row2:20"/>
<mx:TextArea id="ta3" left="col3:5" right="col3:5" top="row1:10" bottom="row2:20"/>
</mx:Application>

运行后结果见附件。