第四章 Flex编程入门 （3小节）

第三节创建一个受约束的布局

本节将教你学会如何创建一个布局受约束的应用程序。受约束的布局可以确保用户界面中的组件在程序窗口大小发生变化时，也能自动地作出调节。备注：你可以通过使用嵌套的布局容 器 /nested layout container 来实现相同的目的。

受约束的布局每当用户改变应用程序的窗口大小时，你希望布局的组件能够自动地进行调节，改变它

们的大小和位置。受约束的布局方式能够实现这种效果。创建受约束的布局，你必须将容器的布局属性设置为绝对方式 （ layout="absolute" ）。备注：帆布容 器 /canvas container 并不需要进 行 layout=”absolute” 的属性设置，因为它默

认是绝对布局方式。举个例子，如果你想在用户增宽程序的窗口时拉 长 TextInput 文本框，你可以将控件锚定在容器的左右边缘上，使文本框的宽度由窗体来确定。 在 Flex 中，所有的约束都是被设置为与容器的相对距离，它们不可能被设置为相对于其它控件。

插入并放置组件创建受约束布局的第一步是在容器中放置组件，并将布局属性设置为绝对值方式。为了精确到象素，你可以直接设 置 x 和 y 坐标，而不是在容器中拖拉组件 。

1. 1. 在导航视图中选 择 File > New > MXML Application ，创建一个名 叫 Layout.mxml 的应用程序。默认地 ， Flex Builder 将 Application 标签中的布局属性设置为绝对方式 。
   1. 2. 将 Layout.mxml 文件作为进行编译的默认文件，并在关联菜单中选 择 Set As Default Application 。
   2. 3. 在 MXML 编辑器的设计模式中， 将 Label 控件 和 TextInput 控件从组件视图中（ Window > Components ）拖拉 到 Layout.mxml 文件里 。
      1. 4. 使用鼠标指针 将 Label 控件 和 TextInput 控件放置到距离容器顶 端 60 象素的地方 。
      2. 5. 在 Flex 属性视图中，打 开 Common and the Layout categories of properties 。
      3. 6 . 在布局中选 择 Label 控件，并在属性项中进行相应的设置 ： Text: Emai l
   3. X: 20
   4. Y: 60
   5. 7 . 在布局中选 择 TextInput 控件，并设置相应 的 TextInput 属性 ：
   6. X: 90
   7. Y: 6 0 Width: 30 0
   1. 8. 切换 到 MXML 编辑器源代码模式， 在 Layout.mxml 文件中输入随后 的 MXML 代码 ： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   2. <mx:Label x="20" y="60" text="Email"/> <mx:TextInput x="90" y="60" width="300"/> </mx:Application>
2. 9. 在 <mx:TextInput> 标签后输入额外的内容，就象这样 ： <mx:Label x="20" y="90" text="Comments"/> <mx:TextArea x="90" y="90" width="300" />

如果你看到的是属性表格而不是预览视图，请点击视图工具条中的标准视图按 钮 /Standard View button 。

<mx:Button x="330" y="150" label="Send"/>

然后，点击工具条上的设计按钮来预览布局效果。它看起来就象这样 ：

10. 保存文件并运行 。

11. 拖拉浏览器的边缘使之更大或更小。组件保持它们与窗体 左 / 上边界的相对位置，但是它们并没有进行扩展或压缩。举个例子，如果你的窗体过于狭窄，那么发送按钮就会看不到， 而 TextInput 控件 和 TextArea 控件也会被拦住一部分。

接下来的一步是为控件设置布局约束，以便它们可以在程序窗体大小改变时进行调节。

定义布局约束

在布局中放置好组件后，你就可以进行布局约束的定义了。 在 MXML 编辑器的设计模式中，选 择 TextInput 控件（用来输入电子邮件地址的）。

在 Flex 属性视图中，确 保 Layout category of properties 是展开的 。 Layout category 中包含了设置锚定的选项 。

3. 为 TextInput 控件定义布局约束，在视图中选择 左 / 右锚定框，并指定距离窗体左边

缘 90 ，距离窗体右边 缘 60 ，就象这样：

这些约束也可以通 过 MXML 代码来实现 ： <mx:TextInput y="60" left="90" right="60"/>

4 . 在编辑器的设计模式下，选 择 TextArea 控件，为它设置四个角与容器的距离 ： Left: 90 Right: 60 Top: 90 Bottom: 190

在 Flex 属性视图中的布局分类里 ， TextArea 控件看起来就象这样 ：

1. 5 . 在布局中选 择 Button 控件，选择 右 / 底锚定框，分别设置数 值 60 和 150 ，就象这样 ：
2. 6 . 保存文件，编译后运行。

7. 拖拉浏览器窗体的边缘使其更大或更小。举个例子，如果你使窗体更狭窄 ， Send 按钮会向左边移动，同 时 TextInput 和 TextArea 文本框会变得更加狭窄。

如果你使浏览器窗体更加宽大 ， Send 按钮会向右边移动 ， TextInput 和 TextArea 文本框会变得更宽。

在本节中，你学习了如何使 用 Flex Builder 创建受约束的布局。