netbeans.apache.org/src/content/kb/docs/java/gbcustomizer-basic_zh_CN.asciidoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = 使用 GridBag 定制器设计基本 Java 窗体
 :jbake-type: tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :icons: font
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :description: 使用 GridBag 定制器设计基本 Java 窗体 - Apache NetBeans
 :keywords: Apache NetBeans, Tutorials, 使用 GridBag 定制器设计基本 Java 窗体

 作者：Jan Stola、Tomas Pavek 和 Alyona Stashkova

 本教程是一个系列教程的第一部分（共两个部分），介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能设计简单的 Java 窗体。
 该系列教程可作为一个指南，介绍了如何设置 GUI 组件布局而无需手动编写布局代码，然后在现有窗体中进行其他更改，以实现项目所需的特定目标布局。

 该系列教程中的每个文档都介绍了一组特定的功能。

 * 第 1 部分：使用 GridBag 定制器设计基本 Java 窗体
 * 第 2 部分：link:../java/gbcustomizer-advanced.html[+使用 GridBag 定制器设计高级 Java 窗体+]


 image::images/netbeans-stamp-80-74.png[title="此页上的内容适用于 NetBeans IDE 7.1 和更高版本"]


 *要学习本教程，您需要具备下列软件和资源。*

 |===
 |软件或资源 |要求的版本

 |link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.1 及更高版本

 |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java 开发工具包 (JDK)+] |版本 6、7 或 8

 |link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] |一个具有演示项目的档案文件，其中包含初始和目标教程布局。
 |===

 *注：*

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


 == 打开示例项目

 1. 下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] 项目，并将其解压缩到您的计算机上的任意位置。
 2. 在 "Projects"（项目）标签中，选择  ``File`` （文件）>  ``Open Project`` （打开项目），导航至在上一步中解压缩的  ``gbcustomizer-basic-tutorial``  项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为  ``gbcustomizer-basic-tutorial``  的文件夹中。
 3. 在 "Reference Problem"（引用问题）对话框中，单击 "Resolve"（解决）。IDE 将自动下载 JUnit 和 JUnit 4 库。按照 NetBeans IDE 安装程序中的说明安装所需的插件。安装完成后，单击 "Finish"（完成）。
 4. 展开 ``源包``  >  ``Tutorial`` ，然后双击  ``ContactsBasicInitial.java`` 。
 此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。

 [.feature]
 --
 image::images/sampleform-small.png[role="left", link="images/sampleform.png"]
 --


 == GridBag 定制器概述

 GridBag 布局定制器是 Java 平台提供的最灵活且最复杂的布局管理器之一。定制器将组件放在行和列网格中，使指定的组件可以占据多个行或列。所有行的高度并不一定相同。同样，所有列的宽度也并不一定相同。实际上，GridBagLayout 将组件放在网格的矩形（单元格）中，然后使用组件的首选大小确定所需的单元格大小。

 要显示 GridBag 定制器，请完成以下步骤：

 1. 在 "Design"（设计）视图中，选择 "JFrame Form"（JFrame 窗体）。
 2. 右键单击该窗体，然后从上下文菜单中选择  ``Customize Layout`` （定制布局）。
 此时将打开 "Customize Layout"（定制布局）对话框，如下所示。

 [.feature]
 --
 image::images/customizerdialog-small.png[role="left", link="images/customizerdialog.png"]
 --

 *注：*在本教程中，已设置了 GridBagLayout。如果使用其他窗体，请在上面的步骤 2 中右键单击该窗体，从上下文菜单中选择 ``设置布局``  >  ``网格包布局`` （这将启用 ``定制布局`` 菜单项）。然后完成该步骤。


 === 网格区域

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


 === 工具栏

 包含五个按钮的工具栏位于网格区域的上方。通过该工具栏，可方便地访问常用的命令，例如撤消、重做、启用相同间隙、隐藏空行和列以及测试布局。

 image::images/toolbar.png[]


 === 属性定制器

 属性定制器位于 "Customize Layout"（定制布局）对话框的左上角。它便于您修改常用的布局约束，例如  ``Anchor`` （锚点）、 ``Insets`` （插入量）等。

 image::images/propcustomizer.png[]


 === 属性表单

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

 image::images/propsheet.png[]


 == 设置组件布局

  ``ContactsBasicInitial``  窗体的组件在添加后设置为单行布局。在未指定布局约束时，GridBagLayout 将按这种方式设置组件布局。


 === 移动

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

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

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

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

 [.feature]
 --
 image::images/layout1-small.png[role="left", link="images/layout1.png"]
 --

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


 === 调整大小

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

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

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

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

 [.feature]
 --
 image::images/tfieldsresized-small.png[role="left", link="images/tfieldsresized.png"]
 --


 === 指定“填充”布局约束

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

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

 [.feature]
 --
 image::images/horizontalset-small.png[role="left", link="images/horizontalset.png"]
 --


 === 预览

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

 image::images/designpreview.png[]

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


 === 指定“X 粗细”和“Y 粗细”约束

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

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

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

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

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

 image::images/resizedpreview.png[]


 === 锚定

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

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

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

 1. 选择  ``State`` （状态）标签右侧的组合框，然后单击定制器<<01d,属性表单>>中  ``Anchor`` （锚点）组合框右侧的箭头按钮 (image::images/arrowbutton.png[])。
 2. 从下拉列表中选择 ``行首`` 。

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

 [.feature]
 --
 image::images/comboanchored-small.png[role="left", link="images/comboanchored.png"]
 --

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

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

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

 image::images/multiselect.png[]


 [start=2]
 . 将标签的 ``锚点`` 布局约束更改为 ``行首`` 。
 标签将锚定到左侧。

 image::images/linestartanchor.png[]


 === 间距

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

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

 1. 按住 Ctrl 键单击以选择所有组件。
 2. 按 "Inset"（插入量）约束文本字段右侧的按钮。
 3. 在显示的对话框中，将  ``Top:`` （上：）和  ``Left:`` （左：）值更改为  ``5`` ，然后单击 "OK"（确定）。

 image::images/insets.png[]

 您的窗体现在应看起来像  ``ContactsBasicFinal.java``  文件中的窗体（如果打开）。

 [.feature]
 --
 image::images/contactsbasicfinal-small.png[role="left", link="images/contactsbasicfinal.png"]
 --


 == 小结

 在本简短教程中，您设计了一个简单的窗体。在编辑布局时，您学会了如何使用 GridBag 定制器的基本功能。
 现在，您可以转至此系列教程的第二部分（共两个部分）。在该部分中，您将修改  ``ContactsAdvancedInitial``  窗体以熟悉 GridBag 定制器的高级功能。

 转至link:../java/gbcustomizer-advanced.html[+使用 GridBag 定制器设计高级 Java 窗体+]

 <<top,返回页首>>

 link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Basic%20Java%20Form%20Using%20the%20GridBag%20Customizer[+发送有关此教程的反馈意见+]


 == 另请参见

 现在，您已完成了“使用 GridBag 定制器设计基本 Java 窗体”教程。有关向所创建的 GUI 中添加功能的信息，请参见：

 * link:gui-functionality.html[+构建 GUI 应用程序简介+]
 * link:gui-image-display.html[+在 GUI 应用程序中处理图像+]
 * link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUI 构建器常见问题解答+]
 * link:../../trails/matisse.html[+Java GUI 应用程序学习资源+]
 * link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+使用 NetBeans IDE 开发应用程序+]中的_实现 Java GUI_

 <<top,返回页首>>
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= 使用 GridBag 定制器设计基本 Java 窗体
	:jbake-type: tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:icons: font
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:description: 使用 GridBag 定制器设计基本 Java 窗体 - Apache NetBeans
	:keywords: Apache NetBeans, Tutorials, 使用 GridBag 定制器设计基本 Java 窗体

	作者：Jan Stola、Tomas Pavek 和 Alyona Stashkova

	本教程是一个系列教程的第一部分（共两个部分），介绍了如何使用 NetBeans IDE GridBag 定制器的基本功能设计简单的 Java 窗体。
	该系列教程可作为一个指南，介绍了如何设置 GUI 组件布局而无需手动编写布局代码，然后在现有窗体中进行其他更改，以实现项目所需的特定目标布局。

	该系列教程中的每个文档都介绍了一组特定的功能。

	* 第 1 部分：使用 GridBag 定制器设计基本 Java 窗体
	* 第 2 部分：link:../java/gbcustomizer-advanced.html[+使用 GridBag 定制器设计高级 Java 窗体+]


	image::images/netbeans-stamp-80-74.png[title="此页上的内容适用于 NetBeans IDE 7.1 和更高版本"]


	要学习本教程，您需要具备下列软件和资源。

	\|===
	\|软件或资源 \|要求的版本

	\|link:http://netbeans.org/downloads/index.html[+NetBeans IDE+] \|7.1 及更高版本

	\|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java 开发工具包 (JDK)+] \|版本 6、7 或 8

	\|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] \|一个具有演示项目的档案文件，其中包含初始和目标教程布局。
	\|===

	注：

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


	== 打开示例项目

	1. 下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252Fgbcustomizer-basic-tutorial.zip[+gbcustomizer-basic-tutorial.zip+] 项目，并将其解压缩到您的计算机上的任意位置。
	2. 在 "Projects"（项目）标签中，选择 ``File`` （文件）> ``Open Project`` （打开项目），导航至在上一步中解压缩的 ``gbcustomizer-basic-tutorial`` 项目，然后单击 "Open Project"（打开项目）。项目文件夹可能包含在也称为 ``gbcustomizer-basic-tutorial`` 的文件夹中。
	3. 在 "Reference Problem"（引用问题）对话框中，单击 "Resolve"（解决）。IDE 将自动下载 JUnit 和 JUnit 4 库。按照 NetBeans IDE 安装程序中的说明安装所需的插件。安装完成后，单击 "Finish"（完成）。
	4. 展开 ``源包`` > ``Tutorial`` ，然后双击 ``ContactsBasicInitial.java`` 。
	此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。

	[.feature]
	--
	image::images/sampleform-small.png[role="left", link="images/sampleform.png"]
	--


	== GridBag 定制器概述

	GridBag 布局定制器是 Java 平台提供的最灵活且最复杂的布局管理器之一。定制器将组件放在行和列网格中，使指定的组件可以占据多个行或列。所有行的高度并不一定相同。同样，所有列的宽度也并不一定相同。实际上，GridBagLayout 将组件放在网格的矩形（单元格）中，然后使用组件的首选大小确定所需的单元格大小。

	要显示 GridBag 定制器，请完成以下步骤：

	1. 在 "Design"（设计）视图中，选择 "JFrame Form"（JFrame 窗体）。
	2. 右键单击该窗体，然后从上下文菜单中选择 ``Customize Layout`` （定制布局）。
	此时将打开 "Customize Layout"（定制布局）对话框，如下所示。

	[.feature]
	--
	image::images/customizerdialog-small.png[role="left", link="images/customizerdialog.png"]
	--

	注：在本教程中，已设置了 GridBagLayout。如果使用其他窗体，请在上面的步骤 2 中右键单击该窗体，从上下文菜单中选择 ``设置布局`` > ``网格包布局`` （这将启用 ``定制布局`` 菜单项）。然后完成该步骤。


	=== 网格区域

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


	=== 工具栏

	包含五个按钮的工具栏位于网格区域的上方。通过该工具栏，可方便地访问常用的命令，例如撤消、重做、启用相同间隙、隐藏空行和列以及测试布局。

	image::images/toolbar.png[]


	=== 属性定制器

	属性定制器位于 "Customize Layout"（定制布局）对话框的左上角。它便于您修改常用的布局约束，例如 ``Anchor`` （锚点）、 ``Insets`` （插入量）等。

	image::images/propcustomizer.png[]


	=== 属性表单

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

	image::images/propsheet.png[]


	== 设置组件布局

	``ContactsBasicInitial`` 窗体的组件在添加后设置为单行布局。在未指定布局约束时，GridBagLayout 将按这种方式设置组件布局。


	=== 移动

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

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

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

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

	[.feature]
	--
	image::images/layout1-small.png[role="left", link="images/layout1.png"]
	--

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


	=== 调整大小

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

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

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

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

	[.feature]
	--
	image::images/tfieldsresized-small.png[role="left", link="images/tfieldsresized.png"]
	--


	=== 指定“填充”布局约束

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

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

	[.feature]
	--
	image::images/horizontalset-small.png[role="left", link="images/horizontalset.png"]
	--


	=== 预览

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

	image::images/designpreview.png[]

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


	=== 指定“X 粗细”和“Y 粗细”约束

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

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

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

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

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

	image::images/resizedpreview.png[]


	=== 锚定

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

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

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

	1. 选择 ``State`` （状态）标签右侧的组合框，然后单击定制器<<01d,属性表单>>中 ``Anchor`` （锚点）组合框右侧的箭头按钮 (image::images/arrowbutton.png[])。
	2. 从下拉列表中选择 ``行首`` 。

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

	[.feature]
	--
	image::images/comboanchored-small.png[role="left", link="images/comboanchored.png"]
	--

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

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

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

	image::images/multiselect.png[]


	[start=2]
	. 将标签的 ``锚点`` 布局约束更改为 ``行首`` 。
	标签将锚定到左侧。

	image::images/linestartanchor.png[]


	=== 间距

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

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

	1. 按住 Ctrl 键单击以选择所有组件。
	2. 按 "Inset"（插入量）约束文本字段右侧的按钮。
	3. 在显示的对话框中，将 ``Top:`` （上：）和 ``Left:`` （左：）值更改为 ``5`` ，然后单击 "OK"（确定）。

	image::images/insets.png[]

	您的窗体现在应看起来像 ``ContactsBasicFinal.java`` 文件中的窗体（如果打开）。

	[.feature]
	--
	image::images/contactsbasicfinal-small.png[role="left", link="images/contactsbasicfinal.png"]
	--


	== 小结

	在本简短教程中，您设计了一个简单的窗体。在编辑布局时，您学会了如何使用 GridBag 定制器的基本功能。
	现在，您可以转至此系列教程的第二部分（共两个部分）。在该部分中，您将修改 ``ContactsAdvancedInitial`` 窗体以熟悉 GridBag 定制器的高级功能。

	转至link:../java/gbcustomizer-advanced.html[+使用 GridBag 定制器设计高级 Java 窗体+]

	<<top,返回页首>>

	link:/about/contact_form.html?to=3&subject=Feedback:%20Designing%20a%20Basic%20Java%20Form%20Using%20the%20GridBag%20Customizer[+发送有关此教程的反馈意见+]



	== 另请参见

	现在，您已完成了“使用 GridBag 定制器设计基本 Java 窗体”教程。有关向所创建的 GUI 中添加功能的信息，请参见：

	* link:gui-functionality.html[+构建 GUI 应用程序简介+]
	* link:gui-image-display.html[+在 GUI 应用程序中处理图像+]
	* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUI 构建器常见问题解答+]
	* link:../../trails/matisse.html[+Java GUI 应用程序学习资源+]
	* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+使用 NetBeans IDE 开发应用程序+]中的_实现 Java GUI_

	<<top,返回页首>>