按设计图制作Java Swing计算器UI：JButton布局不符问题求助

你提供的设计图如下：

你尝试用多个JPanel结合BorderLayout布局按钮，但这种方式无法实现设计图中按钮跨行/列的特殊布局（比如AC、0、=这类按钮），所以达不到预期效果。

你之前的尝试代码：

class Calculator extends JFrame{
    // Here are the attributes
    Calculator(){
    // Here are the frame
    
    // here are the assign JPanels

    firstPanel.add(buttons[0]);
    secondPanel.add(buttons[1]);
        
    for (int i = 2; i < 6; i++){
        thirdPanel.add(buttons[i]);
    }
        
    fourthPanel.add(buttons[6]);
    fifthPanel.add(buttons[7]);
            
    add(firstPanel,BorderLayout.PAGE_START);
    add(secondPanel,BorderLayout.LINE_START);
    add(thirdPanel,BorderLayout.CENTER);
    add(fourthPanel,BorderLayout.LINE_END);
    add(fifthPanel,BorderLayout.PAGE_END);  
    }
}

核心问题 #

BorderLayout是基于东南西北中五个固定区域的布局管理器，无法处理计算器这种需要按钮跨行、跨列的复杂网格布局，推荐使用GridBagLayout（Java标准库自带）来实现精准布局。

实现代码 #

下面是适配设计图的完整代码，用GridBagLayout控制每个按钮的位置、跨度和缩放规则：

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

class Calculator extends JFrame {
    private JButton[] buttons;
    // 按设计图定义按钮文本
    private String[] buttonLabels = {
        "AC", "%", "/", "×",
        "7", "8", "9", "-",
        "4", "5", "6", "+",
        "1", "2", "3", "=",
        "0", ".", "+/-"
    };

    Calculator() {
        // 窗口基础设置
        setTitle("计算器");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(300, 400);
        setLocationRelativeTo(null); // 窗口居中显示

        // 创建主面板，使用GridBagLayout
        JPanel mainPanel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.fill = GridBagConstraints.BOTH; // 按钮填充所在单元格
        gbc.weightx = 1; // 水平权重：窗口缩放时按钮自动拉伸
        gbc.weighty = 1; // 垂直权重：窗口缩放时按钮自动拉伸
        gbc.insets = new Insets(2, 2, 2, 2); // 按钮间的间距

        buttons = new JButton[buttonLabels.length];
        int btnIndex = 0;

        // 第一行：AC（跨2列）、%、/、×
        buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.gridwidth = 2; // 设置跨2列
        mainPanel.add(buttons[btnIndex++], gbc);

        gbc.gridwidth = 1; // 重置列跨度
        buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
        gbc.gridx = 2;
        mainPanel.add(buttons[btnIndex++], gbc);

        buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
        gbc.gridx = 3;
        mainPanel.add(buttons[btnIndex++], gbc);

        // 第二到第四行：数字和加减乘除按钮
        for (int row = 1; row < 4; row++) {
            for (int col = 0; col < 4; col++) {
                buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
                gbc.gridx = col;
                gbc.gridy = row;
                mainPanel.add(buttons[btnIndex++], gbc);
            }
        }

        // 第五行：0（跨2列）、.、+/-
        buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
        gbc.gridx = 0;
        gbc.gridy = 4;
        gbc.gridwidth = 2;
        mainPanel.add(buttons[btnIndex++], gbc);

        gbc.gridwidth = 1;
        buttons[btnIndex] = new JButton(buttonLabels[btnIndex]);
        gbc.gridx = 2;
        mainPanel.add(buttons[btnIndex++], gbc);

        // =按钮：跨4行（从第1行到第4行）
        buttons[15] = new JButton(buttonLabels[15]);
        gbc.gridx = 3;
        gbc.gridy = 1;
        gbc.gridheight = 4; // 设置跨4行
        mainPanel.add(buttons[15], gbc);

        add(mainPanel);
        setVisible(true);
    }

    public static void main(String[] args) {
        // 在Swing事件线程中启动UI，保证线程安全
        SwingUtilities.invokeLater(Calculator::new);
    }
}

关键说明 #

• GridBagLayout支持设置按钮的gridwidth（列跨度）和gridheight（行跨度），完美适配设计图中特殊按钮的布局。
• weightx和weighty设置为1，确保窗口大小变化时所有按钮均匀缩放。
• insets设置按钮间距，提升UI美观度。
• 所有UI操作放在SwingUtilities.invokeLater中，符合Swing线程安全规范。

内容的提问来源于stack exchange，提问作者IROSH LASHAN