首页 > 代码库 > 使用 Flash Builder 4 创建基于约束的布局

使用 Flash Builder 4 创建基于约束的布局

2024-07-13 15:23:10   219人阅读

 

当用户调整应用程序窗口的大小时，可以对组件使用约束来自动调整组件的大小及其在容器中的位置。通常在 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 编辑器指定高级约束。

设置组件的布局约束

可以在具有绝对定位的容器中为组件指定基于约束的布局。
注： 但只有通过编辑源代码才能设置相对于约束列和约束行的布局约束。
  1. 请确保打开的 MXML 文件包括具有绝对定位的容器。
  2. 在 MXML 编辑器的设计模式下，将组件从“组件”视图拖动到容器中。
  3. 通过在设计区域中移动组件，或者在“属性”视图（“窗口”>“属性”）中设置x和y属性，在容器中定位组件。
  4. 在设计区域中选择组件。
  5. 在“属性”视图中，滚动到“布局”类别中的约束工具。
  6. 参考下表选择相应约束复选框，以在用户重新调整应用程序大小时达到所需效果：
    效果约束
    保持组件的位置和大小无
    水平移动组件左或右
    垂直移动组件上或下
    水平或垂直移动组件左上或者右下
    水平调整组件大小左和右
    垂直调整组件大小上和下
    同时沿水平和垂直方向调整组件的大小左和右以及上和下
    将组件水平居中水平居中
    将组件垂直居中垂直居中
    同时沿水平和垂直方向将组件居中垂直居中和水平居中
  7. 指定约束与容器边缘的距离。例如，可以将组件设置为距左边缘 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。


联系
我们