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

时间：2014-07-23 16:16:11 阅读：269 评论：0 收藏：0 [点我收藏+]

当用户调整应用程序窗口的大小时，可以对组件使用约束来自动调整组件的大小及其在容器中的位置。通常在 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 创建基于约束的布局,布布扣,bubuko.com

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

标签：style http 使用文件 width io

原文地址：http://www.cnblogs.com/angus67/p/3863234.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行