46、Swing布局管理器使用指南

Swing布局管理器使用指南

1. 布局管理器简介

在使用Swing进行界面开发时，控制组件在框架上的布局是一项颇具挑战性的任务。有时候，组件似乎有自己的想法，难以按照我们的意愿排列。实际上，问题的关键在于负责确定每个组件在框架或面板中位置的布局管理器。

Swing提供了七种不同的布局管理器，常用的五种如下：
| 布局管理器 | 描述 |
| — | — |
| Flow | 面板的默认布局管理器。它会尽可能将组件排列在一行，当空间不足时开始新的一行。 |
| Border | 框架的默认布局管理器。它将容器划分为五个区域：北、南、东、西和中心。添加组件时，可指定放置的区域。 |
| Box | 可创建包含单行或单列组件的面板。组件排成一行时为水平框，堆叠成一列时为垂直框。 |
| Grid | 适用于创建由相同大小组件组成的网格布局，如计算器或手机界面。 |
| GridBag | 比Grid布局管理器更灵活的网格布局。行和列的大小可以不同，组件可以跨越多行或多列，还能控制组件的拉伸和对齐方式。 |

除了这五种布局管理器，Java还提供了Card和Spring布局管理器，但本文不做介绍。

在很多情况下，创建复杂框架布局的最佳方法是结合使用多种布局管理器。例如，创建一个使用Flow布局的按钮面板，然后将其添加到默认使用Border布局的框架的南部区域。

设置面板或框架的布局管理器可使用 setLayout 方法。示例代码如下：

JPanel panel1 = new JPanel();
panel1.setLayout(new GridBagLayout());

如果使用面板的Flow布局或框架的Border布局，无需进行额外设置，因为它们是默认布局。

2. 使用Flow布局

Flow布局是面板的默认布局管理器。组件会尽可能排列在一行，若空间不足则开始新的一行。单独使用时，Flow布局管理器的作用有限，通常用于包含少量组件的小面板，如一行按钮，然后将该面板添加到使用其他布局管理器的更大面板中。

FlowLayout类的构造函数如下：
| 构造函数 | 描述 |
| — | — |
| FlowLayout() | 创建一个居中对齐且无间距的Flow布局管理器。 |
| FlowLayout(int align) | 创建一个具有指定对齐方式的Flow布局管理器。 align 参数可以是 FlowLayout.LEFT 、 FlowLayout.CENTER 或 FlowLayout.RIGHT 。 |
| FlowLayout(int align, int hgap, int vgap) | 创建一个具有指定对齐方式和间距的Flow布局管理器。 hgap 和 vgap 参数分别指定水平和垂直间距的大小（以像素为单位）。 |

默认情况下，行是居中对齐的。可以通过以下方式指定左对齐或右对齐：

JPanel panel1 = new JPanel();
panel1.setLayout(new FlowLayout(FlowLayout.LEFT)); // 左对齐
panel1.setLayout(new FlowLayout(FlowLayout.RIGHT)); // 右对齐

还可以指定组件之间的间距：

panel1.setLayout(new FlowLayout(FlowLayout.LEFT, 20, 15));

这里，水平间距设置为20像素，垂直间距设置为15像素。

3. 使用Border布局

Border布局管理器将框架或面板划分为五个区域：北、南、东、西和中心。添加组件时，可以指定放置的区域。

BorderLayout类的构造函数和字段如下：
| 构造函数/字段 | 描述 |
| — | — |
| BorderLayout() | 创建一个无间距的Border布局管理器。 |
| BorderLayout(int hgap, int vgap) | 创建一个具有指定水平和垂直间距的Border布局管理器。 |
| NORTH | 北部区域（容器顶部）。 |
| SOUTH | 南部区域（容器底部）。 |
| WEST | 西部区域（容器左侧）。 |
| EAST | 东部区域（容器右侧）。 |
| CENTER | 中心区域。 |

示例代码如下：

JPanel panel1 = new JPanel();
panel1.setLayout(new BorderLayout());
panel1.add(new JLabel("Welcome!"), BorderLayout.NORTH);

这里，标签被添加到北部区域。

使用Border布局时，还需注意以下几点：
- 若添加组件时未指定区域，组件将被放置在中心区域。
- Border布局管理器确定每个区域的大小时，先确定边缘区域（北、南、东、西）的大小，剩余空间分配给中心区域。
- Border布局管理器会自动调整每个区域内组件的大小以填充整个区域。若不希望这样，可以将组件放置在使用Flow布局的单独面板中，然后将这些面板添加到Border布局区域。
- 若向Border布局面板或框架的同一区域添加多个组件，最后添加的组件将占据空间，其他组件将不可见。若要向一个区域添加多个组件，需先将组件添加到一个面板中，然后将该面板添加到Border布局区域。

4. 使用Box布局

Box布局可创建包含单行或单列组件的面板。组件排成一行时为水平框，堆叠成一列时为垂直框。虽然可以直接将Box布局应用于面板，但更常见的是使用Box类，它类似于面板，但默认使用Box布局而非Flow布局。Box类还有几个用于布局组件的静态方法。

Box类的方法如下：
| 方法 | 描述 |
| — | — |
| static Component createGlue() | 创建一个胶水组件，将其两侧的组件尽可能分开。 |
| static Box createHorizontalBox() | 创建一个水平框。 |
| static Component createHorizontalGlue() | 创建一个水平胶水组件，将其两侧的组件尽可能分开。 |
| static Component createHorizontalStrut(int width) | 创建一个水平支柱组件，在其两侧的组件之间插入指定宽度的空间。 |
| static createRigidArea(Dimension d) | 创建一个具有固定大小的区域。 |
| static Box createVerticalBox() | 创建一个垂直框。 |
| static Component createVerticalGlue () | 创建一个垂直胶水组件，将其上下的组件尽可能分开。 |
| static Component createVerticalStrut(int width) | 创建一个垂直支柱组件，在其上下的组件之间插入指定宽度的空间。 |

示例代码如下：

Box box1 = Box.createHorizontalBox();
box1.add(new JButton("Accept"));
box1.add(new JButton("Cancel"));
box1.add(new JButton("Close"));

Box布局的强大之处在于使用支柱、刚性区域和胶水组件：
- 支柱：可在组件之间插入指定宽度的空间。示例代码如下：

Box box1 = Box.createHorizontalBox();
box1.add(Box.createHorizontalStrut(20));
box1.add(new JButton("Accept"));
box1.add(Box.createHorizontalStrut(20));
box1.add(new JButton("Cancel"));
box1.add(Box.createHorizontalStrut(20));
box1.add(new JButton("Close"));
box1.add(Box.createHorizontalStrut(20));

• 刚性区域：类似于支柱，但可在水平和垂直方向上分隔组件。示例代码如下：

box1.add(new JButton("Accept"));
box1.add(Box.createRigidArea(new Dimension(20, 40)));
box1.add(new JButton("Cancel"));

• 胶水：类似于支柱，但会在框的范围内将组件尽可能分开。示例代码如下：

Box box1 = Box.createHorizontalBox();
box1.add(Box.createHorizontalStrut(20));
box1.add(new JButton("Accept"));
box1.add(Box.createRigidArea(new Dimension(20, 40)));
box1.add(new JButton("Cancel"));
box1.add(Box.createHorizontalGlue());
box1.add(new JButton("Close"));
box1.add(Box.createHorizontalStrut(20));

下面是使用Box布局排列按钮的流程：

graph LR
    A[创建水平框] --> B[添加水平支柱]
    B --> C[添加按钮]
    C --> D[添加水平支柱]
    D --> E[添加按钮]
    E --> F[添加水平支柱]
    F --> G[添加按钮]
    G --> H[添加水平支柱]

5. 使用Grid布局

Grid布局适用于需要将一定数量的组件均匀排列成网格的面板。虽然使用频率不高，但在创建计算器或手机界面等场景中非常有用。

GridLayout类的构造函数如下：
| 构造函数 | 描述 |
| — | — |
| GridLayout() | 创建一个将组件排列在单行的网格布局，等同于 GridLayout(1, 0) 。 |
| GridLayout(int rows, int columns) | 创建一个具有指定行数和列数的网格布局。若其中一个参数为零，网格将根据需要扩展以填充足够的行或列（两个参数不能都为零）。 |
| GridLayout(int rows, int columns, int hgap, int vgap) | 创建一个具有指定行数、列数和行间距、列间距的网格布局。 |

创建使用Grid布局的面板时，调用GridLayout构造函数指定网格大小，其中一个参数可以为零，以允许网格根据添加的组件扩展。示例代码如下：

JPanel panel1 = new JPanel();
panel1.setLayout(new GridLayout(0,3));
panel1.add(new JButton("7"));
panel1.add(new JButton("8"));
panel1.add(new JButton("9"));
panel1.add(new JButton("4"));
panel1.add(new JButton("5"));
panel1.add(new JButton("6"));
panel1.add(new JButton("1"));
panel1.add(new JButton("2"));
panel1.add(new JButton("3"));
panel1.add(new JButton("*"));
panel1.add(new JButton("0"));
panel1.add(new JButton("#")); 

向使用Grid布局的面板添加组件时，组件将逐行从左到右填充网格单元格，一行填满后开始新的一行。

6. 使用GridBag布局

GridBag布局管理器是用于布局复杂面板的常用布局管理器。与Grid布局管理器类似，GridBag可将面板划分为网格，但具有以下特殊功能：
- 行和列的大小可以不同，GridBag会根据添加的组件自动调整每列的宽度和每行的高度。
- 可以指定每个组件放置的单元格，控制组件在面板上的位置。
- 可以创建跨越多行或多列的组件，如两列宽的按钮或四行高的列表框。
- 可以告诉GridBag在组件不足以填充分配的空间时将其拉伸以填充整个区域，可指定水平、垂直或两者同时拉伸。
- 若组件未填充分配的区域，可以指定组件在该区域内的对齐方式，如左对齐或右对齐。

6.1 规划布局

创建GridBag面板的第一步是绘制组件在面板上的布局草图，然后将面板划分为行和列，并从左上角开始编号（从0开始）。完成草图后，列出组件、其在网格上的x和y坐标、对齐方式以及是否跨越多行或多列。示例如下：
| 组件 | x | y | 对齐方式 | 跨越 |
| — | — | — | — | — |
| 标签 “Name” | 0 | 0 | 右对齐 | |
| 标签 “Phone” | 0 | 1 | 右对齐 | |
| 标签 “Address” | 0 | 2 | 右对齐 | |
| 名称文本框 | 1 | 0 | 左对齐 | 2列 |
| 电话文本框 | 1 | 1 | 左对齐 | |
| 地址文本框 | 1 | 2 | 左对齐 | 2列 |
| 尺寸框 | 0 | 3 | 左对齐 | |
| 风格框 | 1 | 3 | 左对齐 | |
| 配料框 | 2 | 3 | 左对齐 | |
| 按钮框 | 2 | 4 | 右对齐 | |

6.2 向GridBag面板添加组件

在使用GridBag布局向面板添加组件之前，需先使用 setLayout 方法将GridBag设置为面板的布局管理器：

JPanel panel1 = new JPanel();
panel1.setLayout(new GridBagLayout());

当面板使用GridBag布局时， add 方法接受两个参数：要添加的组件和指定组件在网格中位置的 GridBagConstraints 对象。使用GridBag布局的关键在于设置 GridBagConstraints 的值，以确保组件按预期放置。

GridBagConstraints类的字段如下：
| 字段 | 描述 |
| — | — |
| int gridx | 组件的x位置。 |
| int gridy | 组件的y位置。 |
| int gridwidth | 组件跨越的列数，默认值为1。 |
| int gridheight | 组件跨越的行数，默认值为1。 |
| double weightx | 为网格布局提供如何分配组件宽度空间的提示。 |
| double weighty | 为网格布局提供如何分配组件高度空间的提示。 |
| Insets insets | 一个Insets对象，指示每个组件周围的填充空间大小。Insets类的构造函数为 Insets(int top, int left, int bottom, int right) 。 |
| int anchor | 一个常量，指示组件在未填充空间时的放置位置，取值可以是 GridBagConstraints 类的 CENTER 、 NORTH 、 NORTHEAST 等。 |
| int fill | 一个常量，指示是否拉伸对象以填充可用空间，取值可以是 GridBagConstraints 类的 NONE 、 HORIZONTAL 、 VERTICAL 或 BOTH 。 |

部分字段的额外说明：
- weightx 和 weighty 字段为GridBag布局管理器提供调整列和行大小的提示。若将其中一个值设置为零，相应的行或列大小将保持固定。常见的做法是将这两个参数都设置为100，然后根据需要进行调整。
- insets 字段可用于为组件周围提供填充空间。示例代码如下：

GridBagConstraints gc = new GridBagConstraints();
gc.insets = new Insets(5, 5, 5, 5);

• 默认情况下，组件会被拉伸以填充网格单元格。通常需要设置 fill 字段来改变这种行为。
• 还需设置 anchor 字段来指示组件在未填充单元格时的放置位置。

6.3 处理GridBagConstraints对象

创建 GridBagConstraint 对象并设置其字段的示例代码如下：

GridBagConstraints nameConstraints = new GridBagConstraints();
nameConstraints.gridx = 1;
nameConstraints.gridy = 0;
nameConstraints.gridwidth = 2;
nameConstraints.gridheight = 1;
nameConstraints.weightx = 100.0;
nameConstraints.weighty = 100.0;
nameConstraints.insets = new Insets(5, 5, 5, 5);
nameConstraints.anchor = GridBagConstraints.WEST;
nameConstraints.fill = GridBagConstraints.NONE;
panel1.add(name, nameConstraints);

为每个组件创建新的 GridBagConstraints 对象会导致大量编码。有两种常见的替代方法：
- 创建一个单一的 GridBagConstraints 对象并为面板中的所有组件重用它，只需为每个组件更改需要改变的字段。示例代码如下：

GridBagConstraints gc = new GridBagConstraints();
gc.gridx = 0;
gc.gridy = 0;
gc.gridwidth = 1;
gc.gridheight = 1;
gc.weightx = 100.0;
gc.weighty = 100.0;
gc.insets = new Insets(5, 5, 5, 5);
gc.anchor = GridBagConstraints.WEST;
gc.fill = GridBagConstraints.NONE;
gc.gridy = 0;
gc.gridwidth = 2;
add(name, gc);
gc.gridy = 1;
gc.gridwidth = 1;
add(phone, gc);
gc.gridy = 2;
gc.gridwidth = 2;
add(address, gc);

• 创建一个辅助方法，调用时只需传递每个组件不同的值。示例代码如下：

private void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
    GridBagConstraints gc = new GridBagConstraints();
    gc.gridx = x;
    gc.gridy = y;
    gc.gridwidth = width;
    gc.gridheight = height;
    gc.weightx = 100.0;
    gc.weighty = 100.0;
    gc.insets = new Insets(5, 5, 5, 5);
    gc.anchor = align;
    gc.fill = GridBagConstraints.NONE;
    p.add(c, gc);
}

调用该方法添加组件的示例代码如下：

addItem(panel1, name, 0, 1, 2, 1, GridBagConstraints.WEST);

6.4 GridBag布局示例

以下是一个使用GridBag布局的披萨订单应用程序示例：

import javax.swing.*;
import java.awt.event.*;
import java.awt.*;

public class Pizza extends JFrame {
    public static void main(String [] args) {
        new Pizza();
    }

    JTextField name, phone, address;
    JRadioButton small, medium, large, thick, thin;
    JCheckBox pepperoni, mushrooms, anchovies;
    JButton okButton, closeButton;

    public Pizza() {
        this.setTitle("Pizza Order");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel panel1 = new JPanel();
        panel1.setLayout(new GridBagLayout());

        addItem(panel1, new JLabel("Name:"), 0, 0, 1, 1, GridBagConstraints.EAST);
        addItem(panel1, new JLabel("Phone:"), 0, 1, 1, 1, GridBagConstraints.EAST);
        addItem(panel1, new JLabel("Address:"), 0, 2, 1, 1, GridBagConstraints.EAST);

        name = new JTextField(20);
        phone = new JTextField(10);
        address = new JTextField(20);

        addItem(panel1, name, 1, 0, 2, 1, GridBagConstraints.WEST);
        addItem(panel1, phone, 1, 1, 1, 1, GridBagConstraints.WEST);
        addItem(panel1, address, 1, 2, 2, 1, GridBagConstraints.WEST);

        Box sizeBox = Box.createVerticalBox();
        small = new JRadioButton("Small");
        medium = new JRadioButton("Medium");
        large = new JRadioButton("Large");
        ButtonGroup sizeGroup = new ButtonGroup();
        sizeGroup.add(small);
        sizeGroup.add(medium);
        sizeGroup.add(large);
        sizeBox.add(small);
        sizeBox.add(medium);
        sizeBox.add(large);
        sizeBox.setBorder(BorderFactory.createTitledBorder("Size"));
        addItem(panel1, sizeBox, 0, 3, 1, 1, GridBagConstraints.NORTH);

        Box styleBox = Box.createVerticalBox();
        thin = new JRadioButton("Thin");
        thick = new JRadioButton("Thick");
        ButtonGroup styleGroup = new ButtonGroup();
        styleGroup.add(thin);
        styleGroup.add(thick);
        styleBox.add(thin);
        styleBox.add(thick);
        styleBox.setBorder(BorderFactory.createTitledBorder("Style"));
        addItem(panel1, styleBox, 1, 3, 1, 1, GridBagConstraints.NORTH);

        Box topBox = Box.createVerticalBox();
        pepperoni = new JCheckBox("Pepperoni");
        mushrooms = new JCheckBox("Mushrooms");
        anchovies = new JCheckBox("Anchovies");
        ButtonGroup topGroup = new ButtonGroup();
        topGroup.add(pepperoni);
        topGroup.add(mushrooms);
        topGroup.add(anchovies);
        topBox.add(pepperoni);
        topBox.add(mushrooms);
        topBox.add(anchovies);
        topBox.setBorder(BorderFactory.createTitledBorder("Toppings"));
        addItem(panel1, topBox, 2, 3, 1, 1, GridBagConstraints.NORTH);

        Box buttonBox = Box.createHorizontalBox();
        okButton = new JButton("OK");
        closeButton = new JButton("Close");
        buttonBox.add(okButton);
        buttonBox.add(Box.createHorizontalStrut(20));
        buttonBox.add(closeButton);
        addItem(panel1, buttonBox, 2, 4, 1, 1, GridBagConstraints.NORTH);

        this.add(panel1);
        this.pack();
        this.setVisible(true);
    }

    private void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) {
        GridBagConstraints gc = new GridBagConstraints();
        gc.gridx = x;
        gc.gridy = y;
        gc.gridwidth = width;
        gc.gridheight = height;
        gc.weightx = 100.0;
        gc.weighty = 100.0;
        gc.insets = new Insets(5, 5, 5, 5);
        gc.anchor = align;
        gc.fill = GridBagConstraints.NONE;
        p.add(c, gc);
    }
}

该应用程序未包含事件监听器，按钮仅用于演示GridBag布局的使用。代码亮点如下：
- 第23行：为面板创建GridBag布局管理器。
- 第25行：向面板添加标签。
- 第36行：向面板添加文本框。
- 第43行：使用垂直Box对象创建让用户选择尺寸的单选按钮。
- 第59行：使用垂直Box对象创建让用户选择 crust 风格的单选按钮。
- 第72行：使用垂直Box对象创建让用户选择配料的复选框。
- 第88行：使用水平Box对象容纳OK和Close按钮。

通过上述介绍，你应该对Swing的各种布局管理器有了更深入的了解，并能够根据实际需求选择合适的布局管理器来创建美观、实用的界面。

7. 布局管理器总结与对比

为了更清晰地了解各种布局管理器的特点和适用场景，我们对前面介绍的布局管理器进行总结和对比，如下表所示：
| 布局管理器 | 特点 | 适用场景 |
| — | — | — |
| Flow | 组件按行排列，空间不足时换行；默认居中对齐，可设置对齐方式和间距 | 小面板，如包含少量按钮的行 |
| Border | 将容器划分为五个区域；自动调整组件大小填充区域 | 框架布局，如主界面布局 |
| Box | 可创建单行或单列组件的面板；提供胶水、支柱和刚性区域等布局工具 | 组件单行或单列排列的场景 |
| Grid | 组件均匀排列成网格；所有组件大小相同 | 计算器、手机界面等 |
| GridBag | 行和列大小可不同；组件可跨越多行或多列；可控制组件拉伸和对齐 | 复杂面板布局 |

8. 布局管理器的选择策略

在实际开发中，选择合适的布局管理器至关重要。以下是一个简单的选择策略流程图：

graph LR
    A[是否需要简单的单行或单列布局] -->|是| B[Box布局]
    A -->|否| C[是否需要将容器划分为五个区域]
    C -->|是| D[Border布局]
    C -->|否| E[是否需要组件均匀排列成网格]
    E -->|是| F[Grid布局]
    E -->|否| G[是否需要处理复杂的布局]
    G -->|是| H[GridBag布局]
    G -->|否| I[Flow布局]

根据这个流程图，你可以根据具体需求快速选择合适的布局管理器。例如，如果需要创建一个简单的按钮行，可选择Flow布局；如果需要创建一个复杂的表单界面，GridBag布局可能是更好的选择。

9. 布局管理器的组合使用

在很多情况下，单一的布局管理器可能无法满足复杂的布局需求。这时，可以组合使用多种布局管理器。以下是一个组合使用布局管理器的示例：

import javax.swing.*;
import java.awt.*;

public class CombinedLayoutExample {
    public static void main(String[] args) {
        JFrame frame = new JFrame("Combined Layout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // 创建一个使用Border布局的主面板
        JPanel mainPanel = new JPanel(new BorderLayout());

        // 创建一个使用Flow布局的底部面板
        JPanel bottomPanel = new JPanel(new FlowLayout());
        JButton button1 = new JButton("Button 1");
        JButton button2 = new JButton("Button 2");
        bottomPanel.add(button1);
        bottomPanel.add(button2);

        // 创建一个使用Grid布局的中间面板
        JPanel centerPanel = new JPanel(new GridLayout(2, 2));
        JLabel label1 = new JLabel("Label 1");
        JLabel label2 = new JLabel("Label 2");
        JLabel label3 = new JLabel("Label 3");
        JLabel label4 = new JLabel("Label 4");
        centerPanel.add(label1);
        centerPanel.add(label2);
        centerPanel.add(label3);
        centerPanel.add(label4);

        // 将底部面板添加到主面板的南部区域
        mainPanel.add(bottomPanel, BorderLayout.SOUTH);
        // 将中间面板添加到主面板的中心区域
        mainPanel.add(centerPanel, BorderLayout.CENTER);

        frame.add(mainPanel);
        frame.pack();
        frame.setVisible(true);
    }
}

在这个示例中，主面板使用Border布局，底部面板使用Flow布局，中间面板使用Grid布局。通过组合使用这些布局管理器，我们可以创建出更复杂、更灵活的界面。

10. 布局管理器的常见问题及解决方法

在使用布局管理器的过程中，可能会遇到一些常见问题。以下是一些常见问题及解决方法：
- 组件位置不符合预期 ：
- 检查布局管理器的设置是否正确，例如对齐方式、间距等。
- 确保 GridBagConstraints 对象的参数设置正确，特别是 gridx 、 gridy 、 gridwidth 和 gridheight 。
- 组件大小不符合预期 ：
- 检查布局管理器是否自动调整了组件大小。如果不希望组件被拉伸，可以将组件放置在使用Flow布局的单独面板中。
- 调整 GridBagConstraints 对象的 weightx 和 weighty 参数，以控制组件的大小分配。
- 组件重叠或不可见 ：
- 检查是否向同一区域添加了多个组件。如果是，将组件添加到一个面板中，然后将该面板添加到布局区域。
- 确保组件的大小和位置设置正确，避免出现重叠的情况。

11. 总结

布局管理器是Swing开发中不可或缺的一部分，掌握各种布局管理器的特点和使用方法，可以帮助我们创建出美观、实用的界面。通过本文的介绍，你应该对Flow、Border、Box、Grid和GridBag布局管理器有了更深入的了解，并学会了如何根据具体需求选择合适的布局管理器，以及如何组合使用多种布局管理器。同时，你也了解了一些常见问题的解决方法。希望这些知识能够帮助你在Swing开发中更加得心应手。

在实际开发中，不断实践和尝试不同的布局管理器组合，积累经验，你将能够更好地应对各种复杂的布局需求。祝你在Swing开发中取得成功！