Flex3 快速入门（4）: Flex 组件的定位和布局

 

Flex 组件的定位和布局
大多数 Flex 容器使用预定义的规则集来自动定位您在其内定义的所有子组件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。

在 Flex 应用程序中定位组件的方法有三种:

• 使用自动定位
• 使用绝对定位
• 使用基于限制的布局

使用自动定位对于大多数容器, Flex 会根据容器的布局规则 (如布局方向、容器填充和容器的子级之间的间隙) 自动定位容器子级。

对于使用自动定位的容器, 直接设置其子组件的 x 或 y 属性或调用 move() 方法没有任何效果, 或仅有一个临时效果, 因为布局计算将组件的位置设置为一个计算的结果, 而不是指定的值。

可以通过指定容器属性控制布局的各个方面。下列属性是最常见的:

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

此示例覆盖 Panel 容器的 layout 属性的 "vertical" 的默认设置, 从而以水平方式显示 Label 和 Button 控件。 Panel 容器的 padding 属性定义容器的空白区 (以像素计)。

示例

<?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>

 

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

使用绝对定位

有三个容器支持绝对定位:

如果您将 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>

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

拉伸组件 如果在一个方向中锚定两个边, 如顶边和底边, 则在调整容器大小时, 也会调整组件大小。 下面的示例中的 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>

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

锚定组件的中心

您还可以将某个子组件的水平或垂直中心 (或全部两者) 锚定在容器中心的某个像素偏移处。 除非您同时使用基于百分比的大小调整, 否则该子级不会在指定的尺寸内调整大小。

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>

 

结果

 

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。

一个更加复杂的示例

下面的这个示例使用基于限制的布局来居中 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>