如何在BorderLayout的North区域添加两个JPanel/JButton实现多行布局？

你遇到的问题其实是BorderLayout的核心特性导致的——它的每个区域（NORTH、SOUTH、EAST、WEST、CENTER）只能容纳一个顶级组件，所以当你连续往NORTH区域加两个组件时，第二个会直接替换掉第一个，这就是为啥看不到两个按钮的原因。

要实现你想要的North区域两行布局，只需要在NORTH区域嵌套一个垂直布局的容器就行，把两个需要的组件放到这个容器里，再把容器整体放到BorderLayout的NORTH位置。下面是具体的实现方案：

具体步骤 #

• 创建一个新的JPanel（比如叫northPanel），给它设置垂直方向的布局，推荐用BoxLayout或者GridLayout：前者可以保留组件原有大小，后者会让组件均分容器空间。
• 把你要放在North区域的两个按钮/面板添加到这个northPanel里。
• 最后把northPanel作为单个组件添加到主容器的BorderLayout.NORTH位置。

修改后的完整代码 #

package borderLayoutDemo;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.BorderLayout;
import java.awt.GridLayout;

public class BorderLayoutDemo {
    public static void main(String[] args) {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame fj = new JFrame("Demonstration of Border Layout");
        fj.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // 要放在North区域的两个按钮
        JButton northBtn1 = new JButton("button");
        JButton northBtn2 = new JButton("button2");
        // South区域的按钮
        JButton southBtn = new JButton("button3");
        // Center区域的组件（这里用按钮示例，你可以换成其他JPanel）
        JButton centerBtn = new JButton("CENTER");

        // 创建North区域的嵌套容器，用GridLayout实现两行一列的布局
        JPanel northPanel = new JPanel(new GridLayout(2, 1));
        northPanel.add(northBtn1);
        northPanel.add(northBtn2);

        // 主容器用BorderLayout
        JPanel mainPanel = new JPanel(new BorderLayout());
        mainPanel.add(northPanel, BorderLayout.NORTH);
        mainPanel.add(centerBtn, BorderLayout.CENTER);
        mainPanel.add(southBtn, BorderLayout.SOUTH);

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

补充说明 #

如果你不想让North区域的两个组件均分空间，可以把GridLayout(2,1)换成BoxLayout(northPanel, BoxLayout.Y_AXIS)，这样组件会保持自身的PreferredSize，你还可以用Box.createVerticalStrut(int)来给两个组件之间加间距，比如：

JPanel northPanel = new JPanel();
northPanel.setLayout(new BoxLayout(northPanel, BoxLayout.Y_AXIS));
northPanel.add(northBtn1);
northPanel.add(Box.createVerticalStrut(10)); // 添加10像素的垂直间距
northPanel.add(northBtn2);

这样就能完美实现你想要的4行布局效果啦！

内容的提问来源于stack exchange，提问作者Johnny Robertson