Java CardLayout 實戰：卡片式介面切換與多重布局組合技巧

CardLayout 核心概念

• 容器內疊放多張「卡片」 (元件/面板)，同一時間僅顯示一張
• 適用於：精靈對話框、分頁式設定、狀態切換介面 (登入/註冊/主畫面)
• AWT 版本無視覺分頁標籤，純邏輯切換；Swing JTabbedPane / JavaFX TabPane 提供完整視覺元件

完整範例：CardLayout1 — 結合 BorderLayout + FlowLayout

//: CardLayout1.java
import java.awt.*;
import java.applet.Applet;

class ButtonPanel extends Panel {
    ButtonPanel(String id) {
        setLayout(new BorderLayout());
        add("Center", new Button(id)); // 按鈕填滿整個面板
    }
}

public class CardLayout1 extends Applet {
    Button first = new Button("First"), second = new Button("Second"), third = new Button("Third");
    Panel cards = new Panel();
    CardLayout cl = new CardLayout();

    public void init() {
        setLayout(new BorderLayout()); // Applet 整體布局

        // 頂部導航列：FlowLayout
        Panel nav = new Panel();
        nav.setLayout(new FlowLayout());
        nav.add(first); nav.add(second); nav.add(third);
        add("North", nav);

        // 中央卡片容器
        cards.setLayout(cl);
        cards.add("First card", new ButtonPanel("The first one"));
        cards.add("Second card", new ButtonPanel("The second one"));
        cards.add("Third card", new ButtonPanel("The third one"));
        add("Center", cards);
    }

    public boolean action(Event evt, Object arg) {
        if (evt.target.equals(first)) cl.first(cards);
        else if (evt.target.equals(second)) { cl.first(cards); cl.next(cards); }
        else if (evt.target.equals(third)) cl.last(cards);
        else return super.action(evt, arg);
        return true;
    }
} ///:~

關鍵技術點

1. 多重布局組合

• Applet 整體：BorderLayout (北/中/南)
• 導航列：FlowLayout (按鈕水平排列)
• 卡片容器：CardLayout (疊放切換)
• 每張卡片：ButtonPanel 內部用 BorderLayout 置中單一按鈕

每個 Panel 擁有獨立布局管理器，層層組合形成複雜介面。

2. 卡片識別與切換

• add("卡片名稱", component)：第一參數為字串識別碼，不顯示於介面
• 切換方法：first(), next(), previous(), last(), show(container, "cardName")
• 範例中「第二」按鈕呼叫 first() 再 next() 定位到第二張卡片

3. Applet 時代的彈出式替代方案

Java 1.0 Applet 無法使用 Dialog (會顯示不信任警告)，CardLayout 是唯一實現「多畫面切換」的可行方案。

現代化對應

最佳實踐

1. 卡片識別字串使用常數或 enum，避免拼寫錯誤。
2. 卡片內容複雜時，獨立類別實作 (如 ButtonPanel)，保持主類別簡潔。
3. 大量卡片考慮延遲初始化：首次 show() 時才建構內容，節省啟動時間/記憶體。
4. 切換動畫可用 Timer + 透明度/位移漸變 (Swing) 或 JavaFX 內建動畫。
5. 精靈流程 (Wizard) 建議維護「目前步驟索引」而非依賴 next/previous，便於驗證與跳轉邏輯。

總結

CardLayout 是「無標籤分頁」的核心邏輯，理解其疊放容器 + 字串識別 + 導航方法架構，能輕鬆掌握 Swing JTabbedPane、JavaFX TabPane 乃至前端 Tab 組件的本質。多重布局組合 (Border+Flow+Card) 則是構建真實世界複雜介面的基礎技能。