Flex的定位和布局

转自http://xinsync.xju.edu.cn/index.php/archives/1795

Flex/Flash, Flex2, Flex3 GgNET 03月 9th. 2008, 6:59pm
在一个 Flex 程序中，有三种方法来定位你的组件。
• 使用自动定位
• 使用绝对定位
• 使用基于约束的布局
1.自动定位
• layout:可能的值为”horizontal”, “vertical” 和 “absolute”。当它设定为
“horizontal”的时候，容器会把其子控件水平布局，即布局成一行。当它设定为 “vertical” 的时候，容器会把其子控件垂直布局，即布局成一列。关于设定为 “absolute” 的信息，请看下面的“绝对定位”和“基于约束的布局”部分。
• horzontalAlign：可能的值为”left”, “center”或者”right”。
• verticalAlign：可能的值为”top”, “middle”或者”bottom”。
2.使用绝对定位
有三种容器支持绝对定位：
• 如果你定义了layout属性为”absolute”，Application和Panel容器就会使用绝对定位
• Canvas 容器总是使用绝对定位。
使用绝对定位的时候，你将通过x和y 属性，或者定义一个基于约束的布局来设定
其子控件的位置；否则，Flex 会把容器的子组件放到该容器的坐标 0,0 的位置。如
果你定义了组件的x和y坐标，只有在更改了这些属性值以后 Flex 才会重新定位这
些组件。
使用绝对定位是使 Flex 控件重叠的唯一方法。
3.使用基于约束的布局
通过使用容器中子组件的top, bottom, left, right, horizontalCenter, 或
者verticalCenter 样式属性来制定约束条件。
样式属性top, bottom, left, 和 right以像素为单位定义了该组件的边缘同相应容
器边缘的距离。
样式属性horizontalCenter 和 verticalCenter定义了在指定方向上（水平或垂直）
组件中心与其所在容器中心的距离；负数值会使组件相对于中心偏左或者偏上。
样式属性horizontalCenter 和 verticalCenter定义了相对于容器中心的偏移量
（以像素为单位），那是控件要放置的地方。
不要同样式属性 verticalCenter 一起使用样式属性 top 或 bottom 。
verticalCenter 的值会覆写其它的属性。同样，不要同样式属性 horizontalCenter
一起使用样式属性 left 或 right
使用基于约束的布局所定义的大小会覆写掉任何显式或者基于百分比的大小定义。
例如，如果你定义了样式属性 left 和 right，所产生的基于约束的宽度会覆写所有
的通过 width 或 percentWidth 属性设定的宽度。
本文来源于 冰山上的播客 http://xinsync.xju.edu.cn , 原文地址：http://xinsync.xju.edu.cn/index.php/archives/1795