# 教程：使用 Swing 构建用户界面 > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). IntelliJ IDEA的 UI Designer 插件使您可以使用 Swing 库组件为您的应用程序创建图形用户界面 (GUI)。 使用 UI Designer，您可以快速创建在顶层容器中使用的对话框和控件组，例如 JFrame。 这些元素可以与您直接在 Java 代码中定义的组件共存。 在本教程中，您将学习使用 UI Designer 的基础知识，并尝试为示例应用程序创建自己的 GUI 表单。 作为练习，我们将构建一个图形用户界面表单，用于编辑有关书籍的信息，例如书名、作者、类型和可用状态。 在本教程结束时，您的表单将类似于以下示例： ![示例 GUI 表单](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_example_form.png) Procedure: 安装 Swing UI Designer 插件 此功能性依赖于 Swing UI Designer 插件，您需要安装并启用该插件。 1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择 `插件` 。 2. 找到 Swing UI Designer 插件，然后点击 安装 。 如果出现提示，请重启 IDE。 Procedure: 克隆示例项目 该应用程序的源代码托管在 GitHub 上，位于 [使用 Swing 构建 UI 示例项目](https://github.com/JetBrains/build-UI-using-Swing-sample-project)。 1. 在主菜单中，前往 `文件 | 新建 | 从版本控制创建项目…` 。 2. 指定仓库的 URL，然后点击 克隆 。 3. 如有必要，请同意在新窗口中打开克隆的项目。 ![克隆一个示例项目用于 UI Designer](https://resources.jetbrains.com/help/img/idea/2026.3/gui_designer_clone_app.png) IntelliJ IDEA 存储了您在 `.form` 文件中创建的 GUI 窗体的信息。 表单可以与 Java 源文件关联，并置于 [版本控制](adding-files-to-version-control.html)之下。 首先，我们将创建一个新的 GUI 表单及其关联的 Java 类。 Procedure: 创建新的 GUI 表单 1. 在 项目 工具窗口 `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))，选择 `src.com.example.library.forms` 包，按 `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS))，并选择 `Swing UI Designer | GUI 表单` 。 ![创建新的 GUI 表单](https://resources.jetbrains.com/help/img/idea/2026.3/gui_designer_new_gui_form.png) 2. 在打开的 新建 GUI 表单 对话框中，指定以下详细信息： * 表单名称 ：指定 `BookEditor` 作为新 GUI 表单的名称。 * 基础布局管理器 ：从下拉列表中选择 `GridLayoutManager (IntelliJ)` [布局管理器](https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html)。 * 创建绑定类 ：选择该选项与窗体一起创建一个关联的 Java 类。 IntelliJ IDEA 将自动创建一个 Java 类并绑定到 GUI 表单。 绑定类作为 GUI 表单的底层代码表示。 它允许您将组件链接到类中的对应字段，并有助于实现表单的行为和功能。 * 类名 ：保留与表单关联的 Java 类的默认名称。 ![创建新 GUI 表单](https://resources.jetbrains.com/help/img/idea/2026.3/create_new_gui_form.png) 3. 点击 OK 。 我们的项目现在有一个 `BookEditor.form` 文件和 `BookEditor.java` 文件。 `BookEditor.form` 文件是我们安排 GUI 组件并设置其属性的地方。 该 `BookEditor.java` 文件将包含使我们的表单功能化的代码。 ## 表单部分 在我们继续之前，让我们快速看一下 `BookEditor.form` 。 当您选择一个 `.form` 文件时，您将看到由四个主要部分组成的 UI Designer。 ![用于 .form 文件的 GUI 设计器](https://resources.jetbrains.com/help/img/idea/2026.3/gui_designer.png) 1. [Form workspace](form-workspace.html) ：显示表单中组件的可视化表示。 创建新的 GUI 窗体时，顶级 JPanel 组件会默认添加到 IntelliJ IDEA 中，您可以添加更多组件来构建您的窗体。 2. [组件树](components-treeview.html) ：显示设计窗体中包含的组件，并使您可以导航和选择一个或多个组件。 我们的表单目前只有一个组件，JPanel，不过我们很快会添加更多组件。 3. [属性检查器](inspector.html) ：显示当前在表单工作区或组件树中选择的组件的属性。 4. [Palette](palette.html) ：包含您可以放置在表单中的 UI 组件列表。 接下来，让我们继续构建表单并将必填字段、复选框和控件整合到我们的 Book 编辑器中。 首先，您可以处理 JPanel 组件，该组件充当容器来存储您要构建的 GUI。 Procedure: 设置 JPanel 容器 1. 在 `BookEditor.java` 打开并将以下代码粘贴到文件顶部的包声明下： ```JAVA import javax.swing.*; ``` 2. 在 `BookEditor.java` 中也将以下代码粘贴到 `BookEditor` 类中： ```JAVA private JPanel contentPane; ``` 3. 打开 `BookEditor.form` 文件。 > **Warning:** > IntelliJ IDEA 不提供在编辑器中打开基于 XML 的 `.form` 文件的方式。 请勿手动修改这些文件。 在 组件树 部分，选择 JPanel 以查看组件的可用属性。 ![JPanel 属性](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_JPanel.png) 4. 在属性检查器中，将 字段名 属性的值设置为 contentPane 。 ![设置 JPanel 名称](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_contentPane.png) Procedure: 在表单上放置 GUI 组件 1. 打开 `BookEditor.form` 文件。 2. 在 调色板 部分，选择 JTextField 并点击表单的顶部部分放置组件。 重复此操作，并按从上到下的顺序分别添加一个 JTextField 、一个 JComboBox 和一个 JCheckBox 组件。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_drag_components.mp4) IntelliJ IDEA 显示添加的组件在 组件树 中，并将相应的声明添加到 `BookEditor.java` 中。 3. 打开 `BookEditor.java` 。 将 `BookEditor` 类替换为以下内容，在其中我们重新命名了字段名并扩展了 `BookEditor` 类： ```JAVA public class BookEditor extends JFrame { private JPanel contentPane; private JTextField bookNameField; private JTextField authorNameField; private JComboBox genreComboBox; private JCheckBox isTakenCheckBox; } ``` 4. 请切换回 `BookEditor.form` 。 您将看到，在 `BookEditor.java` 更改字段名称后，IntelliJ IDEA 在 组件树 中显示错误。 要解决这些问题，请在属性检查器中将更新后的组件名称设置为 字段名 属性的值。 > **Tip:** > 请记住， textField1 已重命名为 `bookNameField` ， textField2 已重命名为 `authorNameField` 。 ![设置正确的字段名称](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_fix_issues_names.png) 我们目前的字段名称没有任何标签，终端用户无法识别。 Swing 库提供了一个特定的组件， JLabel ，您可以使用它向您的 GUI 表单添加任何文本标签。 对于复选框，不需要添加标签，因为您可以直接在 JCheckBox 组件属性中配置文本。 Procedure: 添加文本标签 1. 在每个 JTextField 和 JComboBox 右侧添加 JLabel 组件。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_add_labels.mp4) 2. 在 组件树 中选择第一个 JLabel。 在属性检查器中，将 文本 属性的值更改为 `标题` 。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_change_label.mp4) > **Tip:** > 在创建标签时，您可以输入字符串或使用 `.properties` 文件中的键值对。 3. 以类似的方式将其他两个标签的名称更改为 `作者` 和 `Genre` 。 4. 请在 组件树 中选择 JCheckBox 组件。 然后，将 `不可用` 指定为 文本 属性的值。 Book 编辑器需要能够保存和放弃最终用户所做的更改。 为此，让我们添加 保存 和 取消 按钮。 Procedure: 添加按钮 1. 在包含 JCheckBox 的单元格下面添加 VSpacer 组件。 这将创建一个用于按钮的区域并将其平均分成两半。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_vspacer.mp4) 2. 在垂直空隔的每一侧添加两个 JButton 组件。 3. 在每个按钮的 文本 属性中，分别指定它们的名称—— `取消` 和 `保存` 。 ![添加了保存和取消按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_added_buttons.png) 现在我们已经将所有必要的 Swing 组件放置到 GUI 表单中，让我们检查中间结果并了解表单在运行时的外观。 Procedure: 预览 GUI 表单 * 右键点击您的 GUI 表单，然后从上下文菜单中选择 预览 。 ![预览 GUI 表单](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_preview.png) IntelliJ IDEA 将显示 表单预览},{ 对话框。 在预览模式下，您可以点击按钮、选择复选框、输入文本等，就像在运行时所做的一样。 ![表单预览对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_form_preview.png) 在此阶段，我们的GUI表单有些粗糙。 让我们通过调整边距并设置首选窗口大小来改善其外观和感觉。 Procedure: 调整 GUI 窗体的外观和感觉 1. 在 组件树 中选择 JPanel 容器。 2. 要使用 页边距 属性组配置容器的顶部、底部、左侧和右侧边距。 将每个边距的值设置为 `10` 。 ![配置表格边距](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_margins.png) 3. 若要配置表单的首选大小，请选择 显示专家属性 复选框，然后找到并展开 preferredSize 属性组。 请将 宽度 属性的值设置为 `400` ，并将 高度 的值设置为 `200` 。 4. 再运行一次预览以检查结果。 ![预览更新后的表单](https://resources.jetbrains.com/help/img/idea/2026.3/ui_designer_form_preview_2.png) Procedure: 为表单添加功能 现在 GUI 表单已经准备好了，您可以通过编辑 `BookEditor.java` 中的内容来使其发挥作用。 本教程中的表单功能已准备好，并可以在 `BookEditorExample.java` 中找到，位于 `src/com/example/library/forms/BookEditorExample` 下。 1. 将 `BookEditor.java` 的内容替换为 `BookEditorExample.java` 的内容。 2. "在 `BookEditor.java` 中，将类声明和公共方法声明中的两个 `BookEditorExample` 重命名为 `BookEditor` 。" 3. 打开 `Main.java` 并 [运行应用程序](running-applications.html)。 您在表单中输入的书籍详细信息将会打印在终端中。 在 `BookEditor.java` 中， `BookEditor` 构造函数会为 `保存` 按钮注册一个 `ActionListener` ： ```JAVA saveButton.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { saveChanges(); } }); ``` 当用户点击 `保存` 时，Swing 会调用 `actionPerformed()` 方法。 该处理程序会将工作委托给 `saveChanges()` ，后者会收集表单中输入的值并创建一个 `Book` 对象。 构造函数还会为 `取消` 按钮注册一个 `ActionListener` ： ```JAVA cancelButton.addActionListener(new ActionListener() { @Override public void actionPerformed(ActionEvent e) { cancelChanges(); } }); ``` 当用户点击 `取消` 时，处理程序会调用 `cancelChanges()` ，后者会清除表单而不保存更改。 ## 故障排除 * 问题：使用外部构建系统 (Maven/Gradle) 构建带有 GUI Designer 表单的项目时，表单不会被编译，代码无法正常工作，并且在尝试访问组件时因 `NullPointerException` 而失败。 有关可行的解决方案，请参阅支持文章 [如何在使用 Gradle 或 Maven 时配置 GUI 表单编译](https://youtrack.jetbrains.com/articles/SUPPORT-A-486/How-to-configure-GUI-forms-compilation-when-using-Gradle-or-Maven)。