Flex 组件的定位和布局

为什么80%的码农都做不了架构师？>>>   

在 Flex 应用程序中定位组件的方法有三种:
? 使用自动定位
? 使用绝对定位
? 使用基于限制的布局

使用自动定位

对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果

可以通过指定容器属性控制布局
layout: 可能的值有 "horizontal"、 "vertical"或 "absolute"。当设置为 "horizontal"时,容器会将其子级布局在一行内。 当设置为 "vertical"时, 容器会将其子级布局在一列内。 有关 "absolute" 设置的信息, 请参阅绝对定位和基于限制的布局上的部分。
? horizontalAlign: 可能的值有 "left"、 "center"或 "right"。
? verticalAlign: 可能的值有 "top"、 "middle"或 "bottom"。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">//ju zhong xian shi
<mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label id="myLabel" width="180" fontWeight="bold" x="500">
</mx:Label>
<mx:Button label="button1" click="changeText(event);">
</mx:Button>
<mx:Button label="button2" click="myLabel.text='First Flex Application ~~~~~~'">    
</mx:Button>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function changeText(event:MouseEvent):void{
myLabel.text="First Flex Application";
}
]]>
</mx:Script>
</mx:Application>

使用绝对定位

有三个容器支持绝对定位:
? 如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。
? Canvas 容器始终使用绝对定位。

使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局;否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
<mx:Panel title="My Application" layout="absolute" paddingTop="10">
<mx:Label id="myLabel" width="180" fontWeight="bold" x="500">
</mx:Label>
<mx:Button label="button1" click="changeText(event);" x="10">
</mx:Button>
<mx:Button label="button2" click="myLabel.text='First Flex Application ~~~~~~'" x="90">    
</mx:Button>
</mx:Panel>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function changeText(event:MouseEvent):void{
myLabel.text="First Flex Application";
}
]]>
</mx:Script>
</mx:Application>

使用基于限制的布局

在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。top、 bottom、 left 和 right 样式属性指定组件侧边与相应的容器侧边之间的距离 
<mx:Panel title="My Application" layout="absolute" width="300" height="130">
<mx:Button id="myButton" label="Button" right="10" bottom="10"/>
</mx:Panel>

锚定组件的中心

horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间
的距离;一个负数会从中心向左或向上移动组件。
<mx:Panel title="My Application" layout="absolute" width="300" height="130">
<mx:Button id="myButton" label="Button" horizontalCenter="0" verticalCenter="20">
</mx:Button>
</mx:Panel>

转载于:https://my.oschina.net/u/865921/blog/90513