Java 佈局管理器實戰指南：BorderLayout + FlowLayout 打造自適應介面

前言

初學者常苦惱於自動佈局：「如何控制區域大小？按鈕間距？元件隨視窗縮放？」本文以實例示範 BorderLayout + FlowLayout 組合 實現結構清晰、自適應的 Swing 介面。

案例目標介面結構

+----------------------------------+
|  北區 (JPanel1)  查詢條件列       |  ← FlowLayout (LEFT 對齊)
+----------------------------------+
|                                  |
|  中區 (JScrollPane + JTable)      |  ← BorderLayout.CENTER 自動填滿
|      資料表格顯示區               |
|                                  |
+----------------------------------+
|  南區 (JPanel2)  操作按鈕列       |  ← FlowLayout (hgap=30 間距)
+----------------------------------+

JBuilder / 手動代碼雙軌實作

步驟 1：主視窗 BorderLayout

// 手動代碼
JFrame frame = new JFrame("查詢示例");
frame.setLayout(new BorderLayout());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

步驟 2：建立三大區域面板 (順序重要！)

// 北區：查詢條件
JPanel northPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
northPanel.setBackground(Color.RED); // 區分顏色
JLabel label = new JLabel("請輸入查詢條件");
JTextField textField = new JTextField(15);
JButton queryBtn = new JButton("查詢");
northPanel.add(label);
northPanel.add(textField);
northPanel.add(queryBtn);

// 中區：資料表格 (必須最後加入，BorderLayout.CENTER 只保留最後一個)
JScrollPane centerScroll = new JScrollPane();
JTable table = new JTable();
centerScroll.setViewportView(table);
centerScroll.setBackground(Color.PINK);

// 南區：操作按鈕
JPanel southPanel = new JPanel(new FlowLayout(FlowLayout.CENTER, 30, 10)); // hgap=30
southPanel.setBackground(Color.ORANGE);
southPanel.add(new JButton("新增"));
southPanel.add(new JButton("刪除"));
southPanel.add(new JButton("修改"));

步驟 3：加入主視窗 (順序：北 → 南 → 中)

frame.add(northPanel, BorderLayout.NORTH);
frame.add(southPanel, BorderLayout.SOUTH);
frame.add(centerScroll, BorderLayout.CENTER); // 最後加入，佔據剩餘空間

步驟 4：設定元件優先尺寸 (微調)

// 文字框寬度
textField.setPreferredSize(new Dimension(150, 25));
// 按鈕大小
queryBtn.setPreferredSize(new Dimension(80, 30));

完整可執行代碼

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

public class LayoutDemo extends JFrame {
    public LayoutDemo() {
        setLayout(new BorderLayout());
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setTitle("BorderLayout + FlowLayout 實戰");
        
        // 北區
        JPanel north = new JPanel(new FlowLayout(FlowLayout.LEFT));
        north.setBackground(Color.RED);
        north.add(new JLabel("請輸入查詢條件"));
        JTextField tf = new JTextField(15);
        tf.setPreferredSize(new Dimension(150, 25));
        north.add(tf);
        JButton btn = new JButton("查詢");
        btn.setPreferredSize(new Dimension(80, 30));
        north.add(btn);
        
        // 南區
        JPanel south = new JPanel(new FlowLayout(FlowLayout.CENTER, 30, 10));
        south.setBackground(Color.ORANGE);
        south.add(new JButton("新增"));
        south.add(new JButton("刪除"));
        south.add(new JButton("修改"));
        
        // 中區
        JTable table = new JTable(new DefaultTableModel(
            new Object[][]{{"1","張三","工程師"},{"2","李四","設計師"}},
            new String[]{"ID","姓名","職稱"}
        ));
        JScrollPane center = new JScrollPane(table);
        center.setBackground(Color.PINK);
        
        // 加入順序關鍵！
        add(north, BorderLayout.NORTH);
        add(south, BorderLayout.SOUTH);
        add(center, BorderLayout.CENTER);
        
        pack();
        setLocationRelativeTo(null);
        setVisible(true);
    }
    public static void main(String[] args) {
        SwingUtilities.invokeLater(LayoutDemo::new);
    }
}

關鍵技巧總結

進階：GridBagLayout 彈性佈局

當需求超越「邊緣固定、中間填滿」 (如表單多欄對齊、跨行跨列)，請改用 GridBagLayout 或 MigLayout (第三方神器)。但 80% 業務介面 BorderLayout + FlowLayout 組合即可優雅解決。

總結

1. 主視窗用 BorderLayout 切割大區塊
2. 區塊內用 FlowLayout 排列元件，配合 hgap/vgap、alignment 微調
3. 加入順序：邊緣區先加，中心區最後加
4. 用 setPreferredSize 控制關鍵元件尺寸
5. 善用 JScrollPane 處理大量資料顯示

佈局管理器不是黑盒，理解其幾何約束規則，即可精準控制介面外觀。