// 
//     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.
//

= NetBeans GUI 构建器中的间距编辑支持
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: NetBeans GUI 构建器中的间距编辑支持 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, NetBeans GUI 构建器中的间距编辑支持

Jan Stola，Alyona Stashkova

自由设计模式下的容器布局由组件以及这些组件之间的间距组成。组件和间距在 GUI 构建器的设计视图中都是可见的。使用 NetBeans IDE 可以直接在 GUI 构建器中编辑间距。

此教程演示了如何利用间距编辑功能在其他组件之间插入新 UI 组件，以及在 NetBeans GUI 构建器中方便地围绕框架居中组件，而无需关注底层布局管理器。该教程可用作一个指南，介绍如何在自由设计模式下对现有窗体执行更改，以实现项目所需的特定目标布局。


image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"]


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

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

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4 或 8.0 

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

|link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] |一个带有源文件的档案文件，其中包含初始和目标教程布局。 
|===

*注：*

* 您可以按  ``.zip``  档案文件的形式下载将用作本教程起点的项目。
* 本教程仅重点介绍如何设计容器的布局。在 GUI 中添加功能超出了本教程的范围。
* 在 IDE 主菜单中，依次选择 ``工具``  >  ``选项``  >  ``Java``  >  ``GUI 构建器`` ，然后使用 ``可视化其他布局信息`` 选项以直观显示或隐藏间距。


== 打开示例项目

1. 下载 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip[+GapSupport.zip+] 档案，并将其解压缩到您的计算机上的任意位置。
2. 在 NetBeans IDE 主菜单中，选择  ``File`` （文件）>  ``Open Project`` （打开项目），导航到包含上一步所提取  ``GapSupport``  项目的未解压文件的文件夹。
3. 单击 "Open Project"（打开项目）。
"Projects"（项目）窗口应如下所示：

image::images/prj.png[]


. 双击  ``Initial.java``  文件。
此时将在 GUI 构建器的 "Design"（设计）视图中打开样例窗体。

image::images/initialform.png[]

*注：*在 "Navigator"（导航器）窗口中，从主工具栏选择 "Window"（窗口）> "Navigator"（导航器）可查看窗体的组件层次。

image::images/navigator.png[]

<<top,返回页首>>


== 通过拖放间距的边缘来调整大小

现在，我们了解下如何在 IDE 的设计视图中通过拖放间距的边缘来编辑间距。

要在  ``First Name`` （名字）和  ``Last Name`` （姓氏）行之间添加  ``Middle Name`` （中间名）行，需要完成以下步骤：

1. 单击  ``First Name`` （名字）和  ``Last Name`` （姓氏）标签之间的间距。
间距将以绿色突出显示。

image::images/gap-highlighted.png[]


. 将鼠标指针悬停在突出显示间距的底部。
指针将更改为垂直可调整大小的形状。

image::images/gap-resizable.png[]


. 通过按鼠标左键向下拖动指针，然后释放鼠标按键，将所选间距扩大到 50。
间距的新大小将显示在工具提示中。

image::images/resizing.png[]


. 在创建的间距中添加新标签，方法是从组件面板的 "Swing Controls"（Swing 控件）部分拖放标签，使其左侧边缘与  ``First Name`` （名字）标签的左侧边缘对齐，其顶部边缘与  ``First Name`` （名字）行具有建议的首选间距。

image::images/jlabel.png[]


. 双击标签并将标签的文本更改为  ``Middle Name:`` （中间名：）。

image::images/middle-name.png[]


. 通过在组件面板的 "Swing Controls"（Swing 控件）部分拖放新文本字段，将该字段添加到  ``Middle Name:`` （中间名：）标签的右侧，使其底部与  ``Middle Name`` （中间名）标签对齐，左侧边缘与其他文本字段对齐。

image::images/textfield.png[]


. 拖动文本字段的右侧边缘，使其与其他文本字段的右侧边缘对齐。

image::images/textfield-resized.png[]


. 右键单击文本字段中的文本并从弹出菜单中选择 "Edit Text"（编辑文本）。删除文本。

 ``Middle Name`` （中间名）行将插入到窗体组件之间。

image::images/middle-inserted-gap.png[]

<<top,返回页首>>


== 使用鼠标滚轮调整间距大小

使用 IDE，通过单击并滚动鼠标滚轮来微调间距大小，从而调整间距的大小。

要删除  ``Middle Name`` （中间名）与  ``Last Name`` （姓氏）行之间的剩余空间，请单击下方的间距，然后通过向下滚动鼠标滚轮并将新大小设置为  ``default small`` （默认小），从而减少间距的高度。

*注：*NetBeans GUI 构建器对于组件放置支持三种首选间距 -  ``default small`` （默认小）、 ``default medium`` （默认中等）和  ``default large`` （默认大）。

image::images/default-small.png[]

使用鼠标滚轮并利用首选间距来调整窗体组件之间的间距大小。

image::images/middle-inserted.png[]

<<top,返回页首>>


== 编辑组件周围的间距

可以通过将组件放在两个预先标记为可调整大小的相同间距之间来居中对齐组件。

*注：*使用容器可以帮助指定应将组件在何处居中对齐。可以将按钮居中而无需将其包含在新面板中，但在 GUI 构建器中完成起来会更加困难并且生成的布局会有些零碎。因此，建议只要可能，请将要居中对齐的组件包含在面板中。

*要将按钮和可调整大小间距包含在单独的容器中，请执行以下操作：*

1. 选择窗体中的全部四个按钮。
2. 右键单击选定内容，然后从弹出菜单中选择  ``Enclose In`` （包含在）>  ``Panel`` （面板）。

image::images/enclose-panel.png[]

按钮将包含在容器中。

image::images/buttons-enclosed.png[]

*要删除在按钮左右两侧新创建的间距，请完成以下步骤：*

1. 右键单击按钮之一，然后从弹出菜单中选择 "Edit Layout Space"（编辑布局空间）。
此时将显示 "Edit Layout Space"（编辑布局空间）对话框。

image::images/edit-layout-space.png[]


. 将左右两侧间距的大小设置为 0，然后单击 "OK"（确定）。
此时将使用 "Edit Layout Space"（编辑布局空间）对话框删除按钮左右两侧的间距。

image::images/gaps-removed.png[]

*要使得容器上下的间距成为可调整大小的间距，请执行以下步骤：*

1. 双击最后一个按钮底部的间距。
此时将显示 "Edit Layout Space"（编辑布局空间）对话框。


. 在 "Edit Layout Space"（编辑布局空间）对话框中，选择  ``Resizable`` （可调整大小）选项，然后单击 "OK"（确定）。

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


. 对顶部按钮上方的间距重复步骤 1 和 2。
带有按钮的容器上下的间距将成为可调整大小的间距。

*要将样例窗体的按钮居中，请执行以下操作*：

拖动带有按钮的容器的底部边缘，将其与列表底部边缘对齐，如下所示：

image::images/align.png[]

容器将进行拉伸，以便与  ``Available Topics`` （可用主题）和  ``Selected Topics`` （选定主题）列表的高度相符。按钮将在由所属容器确定的空间内居中，因为周围的间距已标记为可调整大小。

image::images/buttons-centered.png[]

<<top,返回页首>>


== 小结

在本教程中，您改进了一个简单的窗体。在操纵间距时，您学习到了如何在自由设计模式下管理空白空间，以及如何设计有吸引力的 UI，而不需要耗费额外的时间来调整布局实现的每个细节。

<<top,返回页首>>

link:/about/contact_form.html?to=3&subject=Feedback:%20Gap%20Support[+发送有关此教程的反馈意见+]


== 另请参见

现在，您已完成了“NetBeans GUI 构建器中的间距编辑支持”教程。有关向所创建的 GUI 中添加功能的信息，请参见：

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

<<top,返回页首>>