SWT/JFace Slider 與 Scale 控件完整指南：垂直/水平滑桿與數值選擇器實作

Slider 與 Scale 控件比較

在 SWT 中，Slider 和 Scale 皆用於數值範圍選擇，但外觀與行為略有不同：

• Slider (滑桿)：傳統滑軌樣式，包含滑塊，適合音量、亮度等直觀調整。支援 setThumb() 設定滑塊大小。
• Scale (縮放/刻度尺)：外觀較現代，通常顯示刻度線與數值標籤，適合精確數值輸入。

兩者皆繼承自 Scrollable，共用 setMinimum()、setMaximum()、setSelection()、setIncrement()、setPageIncrement() 等 API。

範例一：垂直 Slider 音量控制 (SampleSlider)

示範垂直 Slider 搭配 Text 顯示反轉後的數值邏輯（最大值減去目前選擇值）。

package swt_jface.demo8;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Listener;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Slider;
import org.eclipse.swt.widgets.Text;

public class SampleSlider {
    Display display = new Display();
    Shell shell = new Shell(display);
    Slider slider;
    Text value;

    public SampleSlider() {
        shell.setLayout(new GridLayout(1, true));

        Label label = new Label(shell, SWT.NULL);
        label.setText("Volume:");

        slider = new Slider(shell, SWT.VERTICAL);
        slider.setBounds(0, 0, 40, 200); // 垂直時寬度為滑軌寬，高度為長度
        slider.setMaximum(24);
        slider.setMinimum(0);
        slider.setIncrement(1);        // 方向鍵步進
        slider.setPageIncrement(5);    // PageUp/Down 步進
        slider.setThumb(4);            // 滑塊大小 (像素)
        
        slider.addListener(SWT.Selection, new Listener() {
            public void handleEvent(Event event) {
                // 邏輯反轉：滑桿向上數值變大，這裡計算 "Vol: 最大值 - 選擇值 + 最小值 - 滑塊大小"
                int perspectiveValue = slider.getMaximum() - slider.getSelection() + slider.getMinimum() - slider.getThumb();
                value.setText("Vol: " + perspectiveValue);
            }
        });

        value = new Text(shell, SWT.BORDER | SWT.SINGLE);
        value.setEditable(false);
        slider.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
        value.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
        
        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new SampleSlider();
    }
}

範例二：基礎 Scale 元件展示 (Scales)

簡單建立水平與垂直 Scale，並印出預設最小/最大值（預設 0-100）。

package swt_jface.demo8;

import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Scale;
import org.eclipse.swt.widgets.Shell;

public class Scales {
    Display display = new Display();
    Shell shell = new Shell(display);

    public Scales() {
        Scale scaleH = new Scale(shell, SWT.NULL);      // 水平 (預設)
        Scale scaleV = new Scale(shell, SWT.VERTICAL);  // 垂直

        scaleH.setBounds(0, 0, 100, 50);
        scaleV.setBounds(0, 50, 50, 100);

        System.out.println("Min: " + scaleH.getMinimum()); // 0
        System.out.println("Max: " + scaleH.getMaximum()); // 100

        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new Scales();
    }
}

範例三：垂直 Scale 互動範例 (ScaleExample)

結合 GridLayout 佈局，監聽 Selection 事件即時更新 Text 顯示數值。

package swt_jface.demo8;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Listener;
import org.eclipse.swt.widgets.Scale;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

public class ScaleExample {
    Display display = new Display();
    Shell shell = new Shell(display);
    Scale scale;
    Text value;

    public ScaleExample() {
        shell.setLayout(new GridLayout(1, true));

        Label label = new Label(shell, SWT.NULL);
        label.setText("Volume:");

        scale = new Scale(shell, SWT.VERTICAL);
        scale.setBounds(0, 0, 40, 200);
        scale.setMaximum(20);
        scale.setMinimum(0);
        scale.setIncrement(1);
        scale.setPageIncrement(5);
        // Scale 沒有 setThumb 方法
        
        scale.addListener(SWT.Selection, new Listener() {
            public void handleEvent(Event event) {
                // Scale 數值邏輯：最大值 - 選擇值 + 最小值
                int perspectiveValue = scale.getMaximum() - scale.getSelection() + scale.getMinimum();
                value.setText("Vol: " + perspectiveValue);
            }
        });

        value = new Text(shell, SWT.BORDER | SWT.SINGLE);
        value.setEditable(false);
        scale.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
        value.setLayoutData(new GridData(GridData.HORIZONTAL_ALIGN_CENTER));
        
        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }

    public static void main(String[] args) {
        new ScaleExample();
    }
}

關鍵差異總結表

開發建議

1. 佈局管理：在 GridLayout 或 FormLayout 中使用時，建議設定 GridData 對齊屬性而非硬編碼 setBounds，以利跨平台適配。
2. 數值同步：若需雙向綁定（Text 輸入更新 Slider），需在 ModifyListener 中驗證輸入範圍並呼叫 setSelection()，注意移除/新增 Listener 避免遞迴觸發。
3. 自訂繪製：若需極度客製化外觀，可改用 Canvas 繪製，參考 ProgressBar 的 PaintListener 模式。