首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> J2EE

Java 佈局管理器實戰:BorderLayout + FlowLayout 構建自適應 Swing 界面

     編輯:J2EE

佈局管理器核心哲學

Swing 採用委託佈局模式:容器持有 LayoutManager,組件添加時附帶約束對象,佈局管理器負責計算組件位置與大小。核心優勢:跨平台一致性、容器尺寸變化自適應、國際化文本長度自適應。劣勢:精確像素級控制困難,複雜界面需嵌套多層面板組合。

實戰案例:三區自適應主界面

界面結構設計


JFrame (BorderLayout)
├── NORTH: JPanel (FlowLayout-LEFT)     // 查詢條件區:Label + TextField + Button
├── CENTER: JScrollPane (JTable)        // 數據展示區:自帶滾動條、列寬自適應
└── SOUTH: JPanel (FlowLayout-HGAP30)   // 操作按鈕區:新增/刪除/修改 (等間距)

關鍵代碼實現

public class MainFrame extends JFrame {
    public MainFrame() {
        // 1. 根容器 BorderLayout
        getContentPane().setLayout(new BorderLayout());
        
        // 2. 北部查詢面板
        JPanel northPanel = new JPanel(new FlowLayout(FlowLayout.LEFT, 5, 10));
        northPanel.setBackground(Color.RED); // 調試可視化
        JLabel label = new JLabel("請輸入查詢條件");
        label.setPreferredSize(new Dimension(100, 16));
        JTextField textField = new JTextField();
        textField.setPreferredSize(new Dimension(140, 22));
        JButton queryBtn = new JButton("查詢");
        queryBtn.addActionListener(e -> loadTableData());
        northPanel.add(label);
        northPanel.add(textField);
        northPanel.add(queryBtn);
        
        // 3. 中部數據表格 (自帶滾動)
        JTable table = new JTable();
        table.setAutoResizeMode(JTable.AUTO_RESIZE_OFF); // 開啟水平滾動
        JScrollPane scrollPane = new JScrollPane(table);
        scrollPane.getViewport().add(table);
        
        // 4. 南部操作按鈕面板
        JPanel southPanel = new JPanel(new FlowLayout(FlowLayout.CENTER, 30, 5));
        southPanel.setBackground(Color.ORANGE);
        JButton addBtn = new JButton("新增");
        JButton delBtn = new JButton("刪除");
        JButton editBtn = new JButton("修改");
        southPanel.add(addBtn);
        southPanel.add(delBtn);
        southPanel.add(editBtn);
        
        // 5. 組裝
        add(northPanel, BorderLayout.NORTH);
        add(scrollPane, BorderLayout.CENTER);
        add(southPanel, BorderLayout.SOUTH);
        
        // 6. 窗口屬性
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(400, 350);
        setLocationRelativeTo(null); // 居中顯示
        setVisible(true);
    }
    
    private void loadTableData() {
        // 模擬 30 列 × 100 行數據
        Vector cols = new Vector<>();
        for (int i = 1; i <= 30; i++) cols.add("列" + i);
        
        Vector> rows = new Vector<>();
        for (int r = 1; r <= 100; r++) {
            Vector row = new Vector<>();
            for (int c = 1; c <= 30; c++) row.add(r + "/" + c);
            rows.add(row);
        }
        
        DefaultTableModel model = new DefaultTableModel(rows, cols);
        // 獲取中心 JTable 實例並設置模型 (實際項目中應持有引用)
        Component center = getContentPane().getComponent(1); // JScrollPane
        JTable table = (JTable) ((JScrollPane) center).getViewport().getView();
        table.setModel(model);
    }
    
    public static void main(String[] args) {
        SwingUtilities.invokeLater(MainFrame::new); // EDT 線程安全啟動
    }
}


核心佈局管理器精要

管理器適用場景關鍵約束/屬性典型組合
BorderLayout主窗口/面板宏觀五區劃分NORTH/SOUTH/EAST/WEST/CENTER (唯一)根容器、分割面板
FlowLayout按鈕組、工具欄、標簽+輸入框行Alignment (LEFT/CENTER/RIGHT)、Hgap/Vgap嵌套在 BorderLayout 區域內
GridLayout計算器鍵盤、表單網格、等分區域rows/cols/hgap/vgap (強制等寬高)表單面板、屬性表
GridBagLayout複雜表單、報表設計器、精確對齊GridBagConstraints (gridx/y, weightx/y, fill, anchor, insets, ipadx/y)最強大但最複雜,建議 GUI 建模工具生成
BoxLayout垂直/水平堆疊、工具欄、側邊欄X_AXIS/Y_AXIS、glue/strut/rigidArea替代 GridBag 簡單場景
CardLayout向導對話框、Tab 切換、狀態視圖切換first/next/previous/last/show(name)JTabbedPane 內部實現
SpringLayoutGUI 建模器內部、組件間彈簧約束Spring/Constraint (邊緣關係)極少手寫
GroupLayoutMatisse (NetBeans GUI Builder) 專用SequentialGroup/ParallelGroup、Gap、Baseline 對齊IDE 可視化設計產出
MigLayout (第三方)現代 Swing/JavaFX 通用、字符串約束 DSL"wrap", "span", "grow", "push", "align", "size"強烈推薦手寫代碼首選

避坑指南與最佳實踐

  1. 首選組合佈局:複雜界面 = BorderLayout 宏觀 + FlowLayout/GridLayout/BoxLayout 微觀嵌套
  2. 善用 PreferredSize:setPreferredSize() 是佈局管理器計算的關鍵依據,而非 setSize()
  3. 重寫 getPreferredSize():自定義組件必須正確實現,否則佈局錯亂
  4. 水平滾動表格:table.setAutoResizeMode(JTable.AUTO_RESIZE_OFF) + JScrollPane
  5. EDT 線程安全:所有 UI 操作必須在 Event Dispatch Thread 執行,SwingUtilities.invokeLater()
  6. 調試技巧:面板設置背景色區分區域、setBorder(BorderFactory.createTitledBorder("Name")) 可視化邊界
  7. 避免 null 佈局:setLayout(null) + setBounds() 破壞自適應,僅用於極特殊場景 (圖形編輯器、遊戲)
  8. MigLayout 降維打擊:引入 miglayout-swing,單字符串約束搞定 90% 複雜界面,語法可讀、可維護、跨平台完美

從手工佈局到 GUI 建模工具

  • 手寫代碼:學習原理、簡單界面、MigLayout DSL、動態生成界面
  • IntelliJ GUI Designer:綁定 .form XML、生成 $$$setupUI$$$()、支持 GridLayoutManager (類 GridBag)
  • NetBeans Matisse:GroupLayout、雙向同步、極佳預覽
  • Eclipse WindowBuilder:支持 Swing/SWT、雙向編輯、MigLayout 支持
  • JFormDesigner (商業):專業級、支持 MigLayout/JGoodies Forms、代碼生成極其乾淨

建議:先手寫掌握原理,再用工具提效。MigLayout 讓手寫代碼重獲生產力,複雜項目首選 IntelliJ GUI Designer + MigLayout 混合模式。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved