创建基于约束的布局是,创建基于约束的布局是什么

　　本节将向我们展示如何在Adobe Flex Builder中创建基于约束的布局。当用户调整程序窗口时，基于约束的布局确保用户界面中的组件自动调整。

　　建立我们的项目。

　　在开始本节之前，我们必须完成以下任务：

　　如果我们尚未创建项目，请创建一个课程项目。

　　确保自动构建选项已打开。

　　了解Flex中基于约束的布局

　　当用户调整Flex程序窗口时，我们希望布局中的组件能够自动调整。当用户调整程序窗口时，约束的布局可以调整组件的大小和位置。

　　要创建基于约束的布局，我们必须使用一个容器，并且该容器的layout属性应该设置为absolute(layout=absolute )。这个属性为我们提供了使用绝对位置来设置组件的位置和大小的灵活性，并且还提供了在调整容器时设置约束和移动组件的能力。例如，如果我们希望TextInput文本框在用户加宽程序窗口时拉伸，我们可以通过容器的左右边界来定义该控件，这样就可以通过窗口的宽度来设置文本框的宽度。

　　在Flex中，所有约束都是相对于容器的边界设置的。它们不能相对于其他控件进行设置。现在我们知道了基本概念，我们可以在Flex Builder中创建一个简单的布局并定义约束。

　　插入并放置组件

　　创建基于约束的布局的第一步是将组件放置在容器中，并将该容器的布局属性设置为absolute。这个属性允许我们将组件拖放到这个容器中的任何地方。为了像素点的精度，我们可以设置x和y坐标。

　　在本节中，我们将在一个简单的反馈表单中插入和放置组件。

　　1在浏览视图中选择“课程项目”,选择“文件”“新建MXML应用程序”,然后创建一个名为Layout.mxml的项目.

　　Layout.mxml文件被设置为默认编译文件。

　　在3 MXML编辑器的设计模式下，通过从组件视图中拖放组件，将Lable和TextInput控件添加到Layout.mxml文件中。

　　4使用鼠标将标签与TextInput控件并排放置，距离容器顶部60个像素。

　　在Flex属性视图中，扩展属性的公共类和布局类。

　　出现用于设置通用和布局属性的选项。

　　如果我们看到的是属性表而不是之前的属性表，请单击标准视图按钮。

　　1选择标签控件，并将其设置为以下属性：

　　文本：电子邮件

　　X: 20

　　Y: 60

　　2选择TextInput控件，并将其设置为以下属性：

　　X: 90

　　Y: 60

　　宽度：300

　　3切换到MXML编辑器的代码模式，Layout.mxml文件应该包含以下代码：

　　？xml版本=1.0 编码=utf-8 ？

　　MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute

　　MX:Label x= 20 y= 60 text= Email /

　　MX:TextInput x= 90 y= 60 width= 300 /

　　/mx:应用程序

　　4添加剩余的Flex控件，如以下代码所示：

　　？xml版本=1.0 编码=utf-8 ？

　　MX:Application xmlns:MX= http://www . adobe . com/2006/mxml layout= absolute

　　MX:Label x= 20 y= 60 text= Email /

　　MX:TextInput x= 90 y= 60 width= 300 /

　　MX:Label x= 20 y= 90 text= Comments /

　　MX:TextArea x= 90 y= 90 width= 300 /

　　MX:Button x= 330 y= 150 label= Send /

　　/mx:应用程序

　　预览图如下：

　　5保存文件

　　Flex Builder将编译这个程序。

　　6运行程序。

　　程序的运行效果如下图所示：

　　7拖放浏览器窗口使程序窗口变大或变小。

　　这些组件相对于窗口的左侧和顶部保持它们的位置，但是当我们调整浏览器窗口时，它们不会拉伸和压缩。例如，当我们使浏览器窗口变窄时，发送按钮将发送一条消息，TextArea和TextInput控件将部分消失。

　　下一步是为这个布局设置约束，这样当我们调整程序窗口时，这些组件将自动调整。

　　定义布局约束

　　在布局中放置组件后，我们定义布局约束，以便当用户调整程序窗口时，组件可以自动调整。

　　1在MXML编辑器的设计模式下，选择TextInput控件(电子邮件地址)。

　　在Flex属性视图中，属性的布局类是确定的。layout类包含用于设置锚点的选项：

　　3在此视图中，通过选中“左锚点”和“右锚点”复选框来定义TextInput控件的布局约束，然后指定距离窗口左侧90度，距离窗口右侧60度，如下图所示：

　　这两个复选框相对于窗口的左侧和右侧固定屏幕上的TextInput控件。与文本框关联的数字指示控件与窗体边框的距离。

　　左边距是固定控件所必需的，这样当用户水平调整程序窗口时，它会自动扩展或压缩。如果没有左边距定位，控件将向左或向右滑动。

　　在MXML规范中，这些约束条件表示如下：

　　MX:TextInput y= 60 left= 90 right= 60 /

　　4在编辑器的设计模式中，选择TextInput控件，在Flex属性视图中，选中四个角的复选框，并指定以下距离：

　　左：90

　　右：60

　　最高：90

　　底部：190

　　在Flex属性视图中，TextArea控件视图如下所示：

　　5选择按钮控件。在Flex属性视图中，单击右锚点和下锚点的复选框，并指定与右边界的距离为60，与下边界的距离为150。如下图所示：

　　这两个复选框固定了窗口右下角的按钮控件。没有相对于左侧和顶部固定控件的锚点。当用户调整程序时，控件会水平或垂直移动。

　　6编译完成后，保存文件并运行程序。

　　程序运行结果如下：