当用户调整应用程序窗口的大小时,可以对组件使用约束来自动调整组件的大小及其在容器中的位置。通常在 MXML 编辑器的设计模式下定义布局约束。还可以在源代码模式下编辑组件的属性来定义布局约束。
关于基于约束的布局
Flex 支持基于约束的布局。基于约束的布局在支持绝对定位的容器中可用。对于 Spark 容器,默认布局 BasicLayout 支持绝对定位。在使用基于约束的布局时,可以将组件的一个或多个边锚定到容器的边缘或者容器的约束区域。您还可以指定组件相对于锚点的偏移量。当用户调整容器的大小时,容器组件的大小和位置由所定义的锚点确定。
基于约束的布局示例
在以下示例中,通过在“属性”视图中拖动控件或者设置 x 和 y 坐标,将所有控件绝对定位在容器中。图中的箭头指示在用户调整布局大小时,根据以下项目符号列表所指定的约束如何使控件运行。
为了确保用户调整应用程序大小时布局也能正确调整,对控件应用了以下若干布局约束:
- 将 Label A、Label B 和 Label C 锚定到左边和上边,因此在用户重新调整布局大小时这些标签将保留在原地。
- 将 TextInput A 和 TextInput B 锚定到左右两边,因此在用户重新调整布局大小时,控件将水平拉伸或压缩。
- 将 TextArea C 锚定到上下左右四边,因此在用户重新调整布局大小时,控件将在水平和垂直方向上拉伸或压缩。
- 将 Button 控件锚定到右边和下边,因此在用户重新调整布局大小时,控件将保持相对于容器右下角的位置。
布局扩大时,TextInput A 和 TextInput B 控件会水平拉伸,TextArea C 控件会在水平和垂直方向上拉伸,Button 控件会向右下方移动。
基于约束的布局和绝对定位
要创建基于约束的布局,请使用支持绝对定位的容器。对于 Spark 容器,请将布局属性设置为 BasicLayout。如果没有为 Spark 容器指定布局属性,默认属性为 BasicLayout。对于 MX 容器,只能针对 Application、Canvas 和 Panel 容器使用绝对布局。对于 Canvas 容器,绝对布局是默认布局。对于 MX Application 和 Panel 容器,将布局属性设置为绝对可实现绝对定位。对于 MX 容器,layout="absolute"属性将覆盖容器的布局规则,并且使您可以将组件拖动并定位到容器中的任何位置。
使用高级约束布局
您还可以定义锚定到水平和垂直约束区域的约束。在以下情况下,高级约束非常有用:
- 当控件动态调整大小以适合其内容时。例如,显示本地化字符串的控件。
- 当多个列需要大小相同或者保持特定百分比宽度时。
注: 可以使用嵌套 HGroup 和 VGroup 容器来实现类似于高级约束的效果。
对于高级约束布局,可以定义 ConstraintColumn 区域和 ConstraintRow 区域。将组件约束到这些区域的边缘或中央。在容器中,约束列从左向右编排,而约束行从上向下编排。可以使用固定像素尺寸(宽或高)或者使用父容器空间的百分比来定义约束区域。约束列集和行集可以是固定尺寸或百分比尺寸的任意组合。父容器中的组件约束到容器、约束区域或者容器和区域约束的任意组合。在源代码模式下使用 MXML 编辑器指定高级约束。
设置组件的布局约束
可以在具有绝对定位的容器中为组件指定基于约束的布局。
注: 但只有通过编辑源代码才能设置相对于约束列和约束行的布局约束。
- 请确保打开的 MXML 文件包括具有绝对定位的容器。
- 在 MXML 编辑器的设计模式下,将组件从“组件”视图拖动到容器中。
- 通过在设计区域中移动组件,或者在“属性”视图(“窗口”>“属性”)中设置x和y属性,在容器中定位组件。
- 在设计区域中选择组件。
- 在“属性”视图中,滚动到“布局”类别中的约束工具。
- 参考下表选择相应约束复选框,以在用户重新调整应用程序大小时达到所需效果:
效果 约束 保持组件的位置和大小 无 水平移动组件 左或右 垂直移动组件 上或下 水平或垂直移动组件 左上或者右下 水平调整组件大小 左和右 垂直调整组件大小 上和下 同时沿水平和垂直方向调整组件的大小 左和右以及上和下 将组件水平居中 水平居中 将组件垂直居中 垂直居中 同时沿水平和垂直方向将组件居中 垂直居中和水平居中 - 指定约束与容器边缘的距离。例如,可以将组件设置为距左边缘 90 像素,距右边缘 60 像素。用户调整应用程序大小时,组件将拉伸或压缩,以保持与应用程序窗口边缘的这两个距离。Flash Builder 在 MXML 代码中按如下方式表达这些约束:
<s:TextInput y="160" left="90" right="60"/>
注: y 值将根据为左约束和右约束指定的值进行修改。
本文来自Adobe官网http://help.adobe.com/zh_CN/Flex/4.0/UsingFlashBuilder。
使用 Flash Builder 4 创建基于约束的布局