Java GUI 佈局管理器實戰：BorderLayout + FlowLayout 構建響應式界面

痛點：手動佈局 vs 自動佈局的權衡

絕對佈局 (setLayout(null)) 雖精確控制坐標，但：

• 窗口縮放時組件不跟隨調整
• 跨平台 DPI/字體差異導致界面錯位
• 維護成本極高：調整一個組件需重新計算所有坐標

**佈局管理器** 以約束規則描述組件相對關係，容器自動計算幾何屬性，**實現響應式適配**。本文演示 BorderLayout + FlowLayout 組合構建經典「頂部查詢區、中間表格區、底部操作區」界面。

佈局管理器層級結構

JFrame (BorderLayout)
├── NORTH: JPanel (FlowLayout LEFT)  → 查詢條件：Label + TextField + Button
├── CENTER: JPanel (GridLayout 1x1)  → JScrollPane → JTable
└── SOUTH: JPanel (FlowLayout Hgap=30) → 操作按鈕：新增 / 刪除 / 修改

步驟詳解：IDE 可視化設計器操作

1. 根容器：JFrame 設置 BorderLayout (默認即是)。
2. 拖拽順序關鍵：先 NORTH (JPanel)、再 SOUTH (JPanel)、最後 CENTER (JScrollPane)。
   BorderLayout 同區域後加組件會覆蓋，順序決定最終佔用者。
3. 區域區分：設置背景色臨時區分 (紅/橙/粉)，調試完成後移除。
4. 子容器佈局：

• NORTH/SOUTH JPanel 手動設置 FlowLayout (默認居中，需改 LEFT)。
• CENTER JPanel 設置 GridLayout(1,1) 撐滿 JScrollPane。

5. 組件屬性微調：

• FlowLayout.alignment = LEFT → 組件左對齊。
• FlowLayout.hgap / vgap → 組件水平/垂直間距 (SOUTH 按鈕間距 30px)。
• Component.preferredSize → 建議尺寸 (Label 100x16, TextField 140x22)。

核心代碼生成與手工優化

public class VideoQueryFrame extends JFrame {
    private JPanel northPanel, centerPanel, southPanel;
    private JLabel queryLabel;
    private JTextField queryField;
    private JButton queryBtn, addBtn, deleteBtn, updateBtn;
    private JScrollPane scrollPane;
    private JTable dataTable;

    public VideoQueryFrame() {
        initComponents();
        setupLayout();
        bindEvents();
    }

    private void initComponents() {
        northPanel = new JPanel(); northPanel.setBackground(Color.RED);
        centerPanel = new JPanel(); centerPanel.setBackground(Color.PINK);
        southPanel = new JPanel(); southPanel.setBackground(Color.ORANGE);

        queryLabel = new JLabel("請輸入查詢條件");
        queryField = new JTextField();
        queryBtn = new JButton("查詢");

        addBtn = new JButton("增加");
        deleteBtn = new JButton("刪除");
        updateBtn = new JButton("修改");

        dataTable = new JTable();
        scrollPane = new JScrollPane(dataTable);
    }

    private void setupLayout() {
        // 根佈局
        setLayout(new BorderLayout());

        // NORTH: FlowLayout LEFT
        FlowLayout northLayout = new FlowLayout(FlowLayout.LEFT, 5, 10);
        northPanel.setLayout(northLayout);
        northPanel.add(queryLabel);
        northPanel.add(queryField);
        northPanel.add(queryBtn);
        queryLabel.setPreferredSize(new Dimension(100, 16));
        queryField.setPreferredSize(new Dimension(140, 22));
        add(northPanel, BorderLayout.NORTH);

        // CENTER: GridLayout 1x1 撐滿 ScrollPane
        centerPanel.setLayout(new GridLayout(1, 1));
        centerPanel.add(scrollPane);
        add(centerPanel, BorderLayout.CENTER);

        // SOUTH: FlowLayout Hgap=30
        FlowLayout southLayout = new FlowLayout(FlowLayout.CENTER, 30, 5);
        southPanel.setLayout(southLayout);
        southPanel.add(addBtn);
        southPanel.add(deleteBtn);
        southPanel.add(updateBtn);
        add(southPanel, BorderLayout.SOUTH);

        // 窗口屬性
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(800, 600);
        setLocationRelativeTo(null);
    }

    private void bindEvents() {
        queryBtn.addActionListener(e -> loadMockData());
    }

    private void loadMockData() {
        // 模擬 30 列 x 100 行數據
        Vector columns = new Vector<>();
        for (int i = 1; i <= 30; i++) columns.add("列" + i);

        Vector> rows = new Vector<>();
        for (int r = 1; r <= 100; r++) {
            Vector