Swing 分割面板實戰：JSplitPane 左右聯動圖片瀏覽器

功能描述

水平分割面板：左側 JList 顯示圖片文件名（單選），右側 JLabel 顯示對應圖片。拖動分割條調整左右比例，支持一鍵展開/摺疊（setOneTouchExpandable）。

完整實現：SplitPaneDemo

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

public class SplitPaneDemo implements ListSelectionListener {
    private final String[] images = {"Bird.gif", "Cat.gif", "Dog.gif", "Pig.gif"};
    private JLabel pictureLabel;
    private JList list;
    private JSplitPane splitPane;

    public SplitPaneDemo() {
        // 1. 左側列表
        list = new JList<>(images);
        list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
        list.setSelectedIndex(0);
        list.addListSelectionListener(this);
        JScrollPane listScroll = new JScrollPane(list);

        // 2. 右側圖片標簽（初始加載第一張）
        ImageIcon firstIcon = createIcon("images/" + images[0]);
        pictureLabel = new JLabel(firstIcon);
        if (firstIcon != null) {
            pictureLabel.setPreferredSize(new Dimension(firstIcon.getIconWidth(), firstIcon.getIconHeight()));
        }
        JScrollPane picScroll = new JScrollPane(pictureLabel);

        // 3. 水平分割面板
        splitPane = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, true, listScroll, picScroll);
        splitPane.setOneTouchExpandable(true); // 顯示展開/摺疊箭頭
        splitPane.setDividerLocation(150); // 初始分割位置

        // 4. 設置最小尺寸，防止面板被壓縮消失
        Dimension minSize = new Dimension(100, 50);
        listScroll.setMinimumSize(minSize);
        picScroll.setMinimumSize(minSize);

        splitPane.setPreferredSize(new Dimension(400, 200));
    }

    public JSplitPane getSplitPane() { return splitPane; }

    @Override
    public void valueChanged(ListSelectionEvent e) {
        if (e.getValueIsAdjusting()) return; // 忽略調整中事件

        JList src = (JList) e.getSource();
        if (src.isSelectionEmpty()) {
            pictureLabel.setIcon(null);
            pictureLabel.setText(null);
            return;
        }

        int idx = src.getSelectedIndex();
        ImageIcon icon = createIcon("images/" + images[idx]);
        pictureLabel.setIcon(icon);
        if (icon != null) {
            pictureLabel.setText(null);
            pictureLabel.setPreferredSize(new Dimension(icon.getIconWidth(), icon.getIconHeight()));
        } else {
            pictureLabel.setText("圖片未找到: " + images[idx]);
        }
        pictureLabel.revalidate(); // 觸發佈局更新
    }

    protected static ImageIcon createIcon(String path) {
        java.net.URL url = SplitPaneDemo.class.getResource(path);
        return (url != null) ? new ImageIcon(url) : null;
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            JFrame f = new JFrame("SplitPaneDemo");
            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            f.add(new SplitPaneDemo().getSplitPane());
            f.pack();
            f.setVisible(true);
        });
    }
}

關鍵配置參數

進階用法

• 嵌套分割：將 JSplitPane 作為另一個 JSplitPane 的子組件，實現三欄/四欄佈局
• 保存用戶偏好：關閉時持久化 getDividerLocation()，啟動時恢復
• 觸屏適配：增加分割條寬度（setDividerSize(12)），便於手指拖動

遷移提示

JavaFX SplitPane 以 DividerPosition 屬性（0.0-1.0）聲明式綁定，支持嵌套與動畫過渡，API 更現代化。