以下是轉載資料。
來源:flex4.5中布局元素与布局约束的用法
在对容器元素布局与容器布局约束时,经常会用到horizontalAlign、verticalAlign和horizontalCenter、verticalCenter这两组对象,尤其是在spark中如果遇到可以同时设置这两组对象的容器时(如HGroup,VGroup)会有种混乱的感觉。
因此我们最好弄清它们的作用和用法
1、horizontalAlign、verticalAlign:
这一组对象是容器的属性,用来设置容器内的元素在水平和垂直方向的对齐方式,所以操作的对象是容器内的元素。在HGroup,VGroup和中存在这两个属性,但Group、Panel 和Application中没有这两个属性。
2、horizontalCenter、verticalCenter:
这一组对象是容器的样式,用来设置约束容器本身在父级容器中的位置,从组件(容器本身)中心到锚点目标(父级容器)的内容区域中心的距离,所以操作的对象是容器本身。在HGroup,VGroup,Panel 和Application中都存在这组样式。
需要注意的是,这组样式仅在 Canvas 容器中的组件上,或在 Panel 或 Application 容器(layout 属性设置为 absolute)中的组件上使用时才发挥作用。也就是说如果在spark中还必须保证Application的layout属性设置为absolute,即在spark中保留Application的layout属性为默认或设置为
<s:layout> <s:BasicLayout/> </s:layout>
否则horizontalCenter、verticalCenter的样式设置将无效。
下面为一个测试例子:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="600" minHeight="400"> <s:layout> <s:BasicLayout/> </s:layout> <s:VGroup width="50%" height="50%" horizontalAlign="center" verticalAlign="middle" horizontalCenter="0" verticalCenter="0"> <s:Label text="label"/> <s:Button label="button"/> </s:VGroup> <s:Group width="20%" height="20%" horizontalCenter="0" verticalCenter="100"> <s:Button label="g button"/> </s:Group> </s:Application>