<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAutomatic/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="380" height="150"

>
    <mx:Panel 
        title="My Application" 
        paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10" 
        layout="horizontal" verticalAlign="middle"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button 
            id="myButton" label="Click Me!" 
            click="myLabel.text = 'Hello, World!';" 
        />

    </mx:Panel>
</mx:Application>

使用绝对定位
有三个容器支持绝对定位: 
如果您将 layout 属性指定为 "absolute", 则 Application 和 Panel 控件使用绝对定位。 
Canvas 容器始终使用绝对定位。 
使用绝对定位, 你通过使用其 x 和 y 属性来指定子控件的位置, 或者指定基于限制的布局；否则, Flex 会将该子级置于父容器的位置 0,0 处。 当您指定 x 和 y 坐标时, 仅当您更改这些属性值时, Flex 才会重新定位控件。
此示例将 Panel 容器的 layout 属性设置为 "absolute"。接着, 它会设置 Label 和 Button 控件的 x 和 y 属性, 从而这两个控件会重叠。
提示: 使用绝对定位是使 Flex 控件重叠的唯一方法。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutAbsolute/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="280" height="170"

>
    <mx:Panel 
        title="My Application" layout="absolute"
        width="220" height="90" 
    >
        <mx:Label 
            id="myLabel" 
            x="10" y="10" width="180" 
            fontWeight="bold" fontSize="24"
        />

        <mx:Button 
            id="myButton" 
            x="60" y="10" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
        />

    </mx:Panel>
</mx:Application>
 
使用基于限制的布局
您可以通过使用基于限制的布局同时管理子组件大小和定位子组件, 在该布局中您锚定组件的侧边或中心以相对于组件的容器进行定位。
您可以使用基于限制的布局来确定支持绝对定位的任何容器的即时子级的位置和大小。
您通过使用子组件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 样式属性来指定限制。
锚定组件的边缘
您可以将组件的一个或多个边缘锚定在其容器的相应边缘的某个像素偏移处。 当容器调整大小时, 锚定的子级边缘保持与父级边缘的距离相同。
top、 bottom、 left和 right 样式属性指定组件侧边与相应的容器侧边之间的距离 (以像素计)。
下面的示例中的 Button 控件具有锚定的底边和右边, 与它所在的 Panel 容器的边相距 10 个像素。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsBottomRight/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            bottom="10" 
            right="10"
     
    />

    </mx:Panel>
</mx:Application>
 
拉伸组件 
如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 Button 控件四个边都已被锚定, 与它所在的 Panel 容器的边相距 10 个像素。 
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsEdges/index.html"
    horizontalAlign="center" verticalAlign="middle"
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Button 
            id="myButton" 
            label="A button" 
            top="10"
            bottom="10" 
            left="10"
            right="10"
      

      />

    </mx:Panel>
</mx:Application>
锚定组件的中心
您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。
horizontalCenter 和 verticalCenter 样式指定在指定的方向上组件的中心点与容器的中心之间的距离；一个负数会从中心向左或向上移动组件。
horizontalCenter 和 verticalCenter 样式指定从容器中心的偏移 (以像素计), 应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。
示例
<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraintsCenter/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"
>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >

        <mx:Button 
            id="myButton" 
            label="A button" 
            verticalCenter="0"
            horizontalCenter="0"
           />
    </mx:Panel>

</mx:Application>
 
一个更加复杂的示例
下面的这个示例使用基于限制的布局来居中 Label 控件并使 Button 控件拉伸至几乎 Panel 的完全长度。 将 Label 控件的 top 属性设置为 10 以限制它看起来与 Panel 的顶部的距离为 10 像素。 将其 horizontalCenter 属性设置为 10 以完美地将它在 Panel 中居中。 
将 Button 控件的 left 和 right 属性设置为 10 以使它拉伸至距离 Panel 的每一边都在 10 像素内。 将其底边属性设置为 10 以限制其底边距离 Panel 的下边为 10 个像素。
下面的图说明您以可视方式设置的属性的效果。 可视布局控件是 Flex Builder 2 的设计视图的组成部分。
提示: 不要使用 verticalCenter 样式属性指定 top 或 bottom 样式属性, verticalCenter 值会覆盖其他属性。 类似地, 不要使用 horizontalCenter 样式属性指定 left 或 right 样式属性。
由基于限制的布局确定的大小会覆盖任何显式或基于百分比的大小规范。 例如, 如果您指定 left 和 right 样式属性, 产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。
示例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/LayoutConstraints/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="360" height="200"

>
    <mx:Panel 
        title="My Application" layout="absolute" 
        width="300" height="130"
    >
        <mx:Label 
            id="myLabel" 
            fontWeight="bold" 
            fontSize="24" 
            top="10" 
            horizontalCenter="0"
        />

        <mx:Button 
            id="myButton" 
            label="Click Me!" 
            click="myLabel.text = &apos;Hello, World!&apos;;" 
            bottom="10" 
            height="22" 
            left="10"
            right="10" 
           />

    </mx:Panel>
</mx:Application>
 
来源:http://www.adobe.com
收集:  Y-boy