• 您可以将用作该系列教程起点的项目作为 .zip 归档文件进行下载。
• 本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。

网格区域

网格区域位于 "Customize Layout"（定制布局）对话框的右侧。它显示组件的网格布局。
已添加样例窗体中的组件，但没有正确设置这些组件的布局。

工具栏

包含四个按钮的工具栏位于网格区域的上方。通过该工具栏，可方便地访问常用的命令，例如撤消、重做、填充和预览布局。

属性定制器

属性定制器位于 "Customize Layout"（定制布局）对话框的左上角。它便于您修改常用的布局约束，即 "Anchor"（锚点）和 "Fill"（填充）。

属性表单

属性表单位于属性定制器的下方。它显示选定组件的布局约束。

移动

您可以根据需要使用简单的拖放功能移动组件。如果选定，将使用绿色突出显示组件。拖动组件时，组件的 "Grid X"（网格 X）和 "Grid Y"（网格 Y）属性将随之改变以反映新位置。根据需要，将自动创建新的列和行。

要创建下图所示的布局，请按如下方式将组件从第 3 列移到第 12 列：

1. 将 Surname: 标签和相邻文本字段拖至第二行的前两个单元格中。
2. 将 Street: 标签、相邻文本字段以及相邻 Browse 按钮拖至第三行的前三个单元格中。
3. 将 City: 标签、相邻文本字段以及相邻 Browse 按钮拖至第四行的前三个单元格中。
4. 将 State: 标签和相邻组合框拖至第五行的前两个单元格中。

现在，组件将按目标布局进行放置。

注意：在移动组件时，将使用绿色突出显示目标单元格。

调整大小

在选定组件时，可通过拖动组件周围显示的小方形大小调整控柄来调整组件的大小。

要调整 First Name: 和 Surname: 文本字段的大小并使其占据两个相邻的单元格，请完成以下步骤：

1. 按住 Ctrl 键单击两个 JTextField 组件将其选中。
2. 在选定两个 JTextField 的情况下，将光标放在单元格的右边缘上，单击并拖动，直到突出显示的橙色基准线包含右侧第 3 列中的相邻单元格。
3. 松开光标以调整组件大小。

此时将扩展 First Name: 和 Surname: 文本字段以占据两个单元格（如下图所示），同时，将突出显示占据的单元格。

指定 "Fill"（填充）布局约束

虽然 First Name: 和 Surname: 文本字段占据两个单元格，但它们具有首选大小并位于显示区域的中间位置。在继续操作之前，我们需要使用 "Fill"（填充）布局约束填充单元格的整个区域。

要设置足够宽的文本字段以水平填充其显示区域而不更改其高度，请在属性表单区域的 "Fill"（填充）组合框中选择 "Horizontal"（水平）。

预览

现已成功完成了 ContactsBasicInitial 窗体布局，您可以尝试使用该界面查看结果。您可以在工作过程中预览窗体，方法是单击定制器工具栏中的 "Test Layout"（测试布局）按钮 ()。此时窗体在单独的窗口中打开，以便您在生成并运行窗体之前对其进行测试。

该预览用于测试布局的动态行为，即在调整所设计容器的大小时的布局行为。

指定 "Weight X"（X 粗细）和 "Weight Y"（Y 粗细）约束

指定粗细将对 GridBagLayout 组件外观造成很大影响。粗细用于确定如何在列（X 粗细）和行（Y 粗细）之间分配空间；这对指定调整大小行为非常重要。
通常，粗细是将 0.0 和 1.0 作为最小和最大值指定的：根据需要，使用两者之间的数字。较大的数字表示组件的行或列具有较大的空间。

如果您尝试水平调整预览的容器大小，则可以看到布局组件保持相同的大小并位于容器的中间位置。甚至将 "Fill"（填充）约束设置为 "Horizontal"（水平）的 First Name: 和 Surname: 字段也不会增大，因为 "Fill"（填充）约束指的是单元格内部区域，而不是单元格大小。换句话说，如果将组件的 "Fill"（填充）属性设置为 "None"（无）以外的值，则表明它“可以”增大，但并不表明它“需要”增大。
"Weight X"（X 粗细）和 "Weight Y"（Y 粗细）布局约束决定了组件是否“需要”在水平和垂直方向增大。
如果一行（或列）中的两个组件具有非零 X 粗细（或 Y 粗细）约束值，则这些值决定了各个组件的增大幅度。例如，如果值为 0.6 和 0.4，则第一个组件获得 60% 可用额外空间，而第二组件获得 40% 空间。

要使设计的容器在水平方向上正确调整大小，请执行以下操作：

1. 在 GridBag 定制器的网格区域中，选择 First Name: 标签右侧的文本字段。
2. 在 "Weight X"（X 粗细）布局约束值字段中键入 1.0，然后按 Enter 键。
3. 在 GridBag 定制器的网格区域中，
选择 Surname: 标签右侧的文本字段。
4. 在 "Weight X"（X 粗细）布局约束值字段中键入 1.0，然后按 Enter 键。
5. 在 GridBag 定制器的网格区域中，选择 Street 标签右侧的文本字段。
6. 在 "Fill"（填充）组合框中选择 "Horizontal"（水平），然后按 Enter 键。
7. 在 "Weight X"（X 粗细）布局约束值字段中键入 1.0，然后按 Enter 键。
8. 在 GridBag 定制器的网格区域中，选择 City 标签右侧的文本字段。
9. 在 "Fill"（填充）组合框中选择 "Horizontal"（水平），然后按 Enter 键。
10. 在 "Weight X"（X 粗细）布局约束值字段中键入 1.0，然后按 Enter 键。

要验证设计的容器是否在水平方向上正确调整大小，请单击定制器工具栏中的 "Test Layout"（测试布局）按钮 ()，然后拖动 ContactsBasicInitial 窗体的边框。

锚定

如果组件大小比其显示区域小，则可以使用锚定功能确定组件的放置位置（在该区域内）。

在上一部分中水平调整 ContactsBasicInitial 窗体大小期间，您可能已注意到 State 组合框移到离 State 标签很远的位置。由于该组合框的首选大小比相应单元格小，因此，GridBagLayout 缺省将该组件放在单元格的中心位置。

要更改此行为，请按如下方式指定 "Anchor"（锚点）布局约束：

1. 选中 State 标签右侧的组合框，然后单击 "Anchor"（锚点）组合框右侧的箭头按钮 ()。
2. 从下拉列表中选择 "Line Start"（行首）。

现在，在水平调整窗体大小时，State 组合框将锚定到该窗体的左侧。

要将标签与左侧对齐，而不是像现在这样与中心对齐，请完成以下步骤：

1. 选择 First name:、Surname:、Street、City 和 State 标签。

注意：可通过以下方法选择多个组件：在第一个组件上按鼠标左键，按住该组件并将其拖至最后一个组件上，就好像绘制一个包含所有标签的矩形一样。在松开鼠标后，将使用橙色边框和绿色背景突出显示所有五个组件，如下所示。



2. 将标签的 "Anchor"（锚点）布局约束更改为 "Line Start"（行首）。
   标签将锚定到左侧。

间距

缺省情况下，每个组件都没有外部填充。"Inset"（插入量）约束用于指定组件的外部填充，即组件与其显示区域边缘之间的最小间隙。

在当前布局中，组件彼此放置得太近。要分隔这些组件，请执行以下操作：

1. 按住 Ctrl 键单击以选择所有组件。
2. 按 "Inset"（插入量）约束文本字段右侧的按钮。
3. 在显示的对话框中，将 "Top:"（顶层：）和 "Left:"（左侧：）值更改为 5，然后单击 "OK"（确定）。
   现在，窗体看起来应与打开的 ContactsBasicFinal.java 文件中的窗体一样。