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?属性定义容器的空白区 (以像素计)。

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

• 如果您将 属性指定为,则 Application 和 Panel 控件使用绝对定位。
• Canvas 容器始终使用绝对定位。

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

此示例将 Panel 容器的 属性设置为 。接着,它会设置 Label 和 Button 控件的 和 属性,从而这两个控件会重叠。

?

  top、 、 、 、 或  样式属性来指定限制。
锚定组件的边缘
您可以将组件的一个或多个边缘锚定在其容器的相应边缘的某个像素偏移处。 当容器调整大小时,锚定的子级边缘保持与父级边缘的距离相同。
、 、 和  样式属性指定组件侧边与相应的容器侧边之间的距离 (以像素计)。
下面的示例中的 Button 控件具有锚定的底边和右边,与它所在的 Panel 容器的边相距 10 个像素。
horizontalCenter 和  样式指定在指定的方向上组件的中心点与容器的中心之间的距离；一个负数会从中心向左或向上移动组件。
 和  样式指定从容器中心的偏移 (以像素计),应将控件置于此处。 下面的示例中的 Button 控件将两个样式都设置为 0 (零) 以完美地将它在 Panel 容器中居中。