Java SWT 中的小部件 · ZetCode 中文系列教程

# Java SWT 中的小部件 > 原文： [http://zetcode.com/gui/javaswt/widgets/](http://zetcode.com/gui/javaswt/widgets/) 在 Java SWT 編程教程的這一部分中，我們將介紹一些 SWT 小部件。小部件是 GUI 應用的基本構建塊。將小部件視為樂高玩具的一部分。多年來，幾個小部件已成為所有 OS 平臺上所有工具包中的標準。例如，按鈕，復選框或滾動條。 ## `Label` `Label`是顯示字符串或圖像的不可選擇的用戶界面對象。此外，它可以顯示水平或垂直線。 `LabelEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.graphics.Point; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Label; import org.eclipse.swt.widgets.Shell; /** * ZetCode Java SWT tutorial * * This program uses the Label widget to * show lyrics of a song. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class LabelEx { final String lyrics = "And I know that he knows I'm unfaithful\n"+ "And it kills him inside\n"+ "To know that I am happy with some other guy\n"+ "I can see him dyin'\n"+ "\n"+ "I don't wanna do this anymore\n"+ "I don't wanna be the reason why\n"+ "Every time I walk out the door\n"+ "I see him die a little more inside\n"+ "I don't wanna hurt him anymore\n"+ "I don't wanna take away his life\n"+ "I don't wanna be... A murderer"; public LabelEx(Display display) { initUI(display); } private void initUI(Display display) { Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER); Label label = new Label(shell, SWT.LEFT); label.setText(lyrics); Point p = label.computeSize(SWT.DEFAULT, SWT.DEFAULT); label.setBounds(5, 5, p.x+5, p.y+5); shell.setText("Unfaithful"); shell.pack(); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } @SuppressWarnings("unused") public static void main(String[] args) { Display display = new Display(); LabelEx ex = new LabelEx(display); display.dispose(); } } ``` 該代碼示例在窗口上顯示了一些歌詞。 ```java String lyrics = "And I know that he knows I'm unfaithful\n"+ "And it kills him inside\n"+ ... ``` 我們構建多行文本。 ```java Label label = new Label(shell, SWT.LEFT); label.setText(lyrics); ``` `Label`小部件已創建； `SWT.LEFT`選項使其文本保持左對齊。 ```java Point p = label.computeSize(SWT.DEFAULT, SWT.DEFAULT); label.setBounds(5, 5, p.x+5, p.y+5); ``` 我們計算文本的大小，以便在文本周圍放置一些空間。 ```java shell.pack(); ``` `pack()`方法將窗口調整為首選大小。足夠大以顯示標簽小部件。 ## `CheckBox` 在 SWT 中，復選按鈕是`Button`的特例。它是具有兩種狀態的窗口小部件：打開和關閉。接通狀態通過復選標記顯示。它用來表示一些布爾屬性。 `CheckButtonEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.layout.RowLayout; import org.eclipse.swt.widgets.Button; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Shell; /** * ZetCode Java SWT tutorial * * This program uses a check button * widget to show/hide the title * of the window. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class CheckButtonEx { private Shell shell; public CheckButtonEx(Display display) { initUI(display); } private void initUI(Display display) { shell = new Shell(display); RowLayout layout = new RowLayout(); layout.marginLeft = 30; layout.marginTop = 30; shell.setLayout(layout); Button cb = new Button(shell, SWT.CHECK); cb.setText("Show title"); cb.setSelection(true); cb.addListener(SWT.Selection, event -> onButtonSelect(cb)); shell.setText("Check button"); shell.setSize(250, 200); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } private void onButtonSelect(Button cb) { if (cb.getSelection()) { shell.setText("Check button"); } else { shell.setText(""); } } @SuppressWarnings("unused") public static void main(String[] args) { Display display = new Display(); CheckButtonEx ex = new CheckButtonEx(display); display.dispose(); } } ``` 窗口標題的顯示取決于檢查按鈕的狀態。 ```java Button cb = new Button(shell, SWT.CHECK); cb.setText("Show title"); ``` 通過將`SWT.CHECK`傳遞給`Button`構造器來創建復選按鈕小部件。 `setText()`方法設置按鈕的標簽。 ```java cb.setSelection(true); ``` 默認情況下標題是可見的，因此我們默認使用`setSelection()`方法選擇復選按鈕。 ```java cb.addListener(SWT.Selection, event -> onButtonSelect(cb)); ``` 我們向按鈕的`SWT.Selection`事件類型添加一個監聽器對象。 ```java private void onButtonSelect(Button cb) { if (cb.getSelection()) { shell.setText("Check button"); } else { shell.setText(""); } } ``` 在`onButtonSelect()`方法內部，我們根據選中按鈕的狀態顯示或隱藏窗口的標題。確認按鈕的狀態通過`getSelection()`方法確定。 ![Check button](https://img.kancloud.cn/40/af/40af7a2141a288f96d90c3740cb42067_246x197.jpg) 圖：復選按鈕 ## `Spinner` `Spinner`控件允許從一系列值中選擇一個數字。可以通過單擊向上和向下箭頭或通過按下和`向上鍵`或`向上鍵`和`來選擇該值。向下翻頁`鍵。 `SpinnerEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.layout.RowData; import org.eclipse.swt.layout.RowLayout; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Label; import org.eclipse.swt.widgets.Shell; import org.eclipse.swt.widgets.Spinner; public class SpinnerEx { private Label label; public SpinnerEx(Display display) { initUI(display); } private void initUI(Display display) { Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER); RowLayout layout = new RowLayout(); layout.marginLeft = 10; layout.marginTop = 10; layout.spacing = 30; layout.center = true; shell.setLayout(layout); Spinner spinner = new Spinner(shell, SWT.BORDER); spinner.setMinimum(0); spinner.setMaximum(100); spinner.setSelection(0); spinner.setIncrement(1); spinner.setPageIncrement(10); spinner.setLayoutData(new RowData(30, -1)); spinner.addListener(SWT.Selection, event -> onSelected(spinner)); label = new Label(shell, SWT.NONE); label.setText("0"); shell.setText("Spinner"); shell.setSize(200, 150); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } private void onSelected(Spinner spinner) { String val = spinner.getText(); label.setText(val); label.pack(); } @SuppressWarnings("unused") public static void main(String[] args) { Display display = new Display(); SpinnerEx ex = new SpinnerEx(display); display.dispose(); } } ``` 該示例具有`Spinner`和`Label`。從微調器中選擇的值顯示在標簽中。 ```java Spinner spinner = new Spinner(shell, SWT.BORDER); ``` 創建`Spinner`控件的實例。 ```java spinner.setMinimum(0); spinner.setMaximum(100); spinner.setSelection(0); spinner.setIncrement(1); spinner.setPageIncrement(10); ``` 我們使用微調器 API 指定最小，最大，當前，增量和頁面增量值。 ```java spinner.addListener(SWT.Selection, event -> onSelected(spinner)); ``` 等待微調器選擇事件的監聽器已添加到控件中。觸發事件時，將調用`onSelected()`方法。 ```java private void onSelected(Spinner spinner) { String val = spinner.getText(); label.setText(val); label.pack(); } ``` 我們獲得微調器的當前值，并將其設置為標簽組件。 ![Spinner](https://img.kancloud.cn/bd/a5/bda53e1561c9083413b9105739b51130_196x147.jpg) 圖：旋鈕 ## `List`小部件 `List`小部件使用戶可以從項目列表中選擇一個選項。列表可以是單選或多選。 `ListWidgetEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.layout.FormAttachment; import org.eclipse.swt.layout.FormData; import org.eclipse.swt.layout.FormLayout; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Label; import org.eclipse.swt.widgets.List; import org.eclipse.swt.widgets.Shell; /** * ZetCode Java SWT tutorial * * This program shows the List widget. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ListWidgetEx { private Label status; public ListWidgetEx(Display display) { initUI(display); } private void initUI(Display display) { Shell shell = new Shell(display); status = new Label(shell, SWT.NONE); status.setText("Ready"); FormLayout layout = new FormLayout(); layout.marginHeight = 5; layout.marginWidth = 5; layout.spacing = 5; shell.setLayout(layout); FormData labelData = new FormData(); labelData.left = new FormAttachment(0); labelData.right = new FormAttachment(100); labelData.bottom = new FormAttachment(100); status.setLayoutData(labelData); List list = new List(shell, SWT.BORDER); list.add("Aliens"); list.add("Capote"); list.add("Neverending story"); list.add("Starship troopers"); list.add("Exorcist"); list.add("Omen"); list.addListener(SWT.Selection, event -> onListItemSelect(list)); FormData listData = new FormData(); listData.width = 250; listData.height = 200; listData.left = new FormAttachment(shell, 0); listData.top = new FormAttachment(shell, 0); listData.right = new FormAttachment(100, 0); listData.bottom = new FormAttachment(status, 0); list.setLayoutData(listData); shell.setText("List"); shell.pack(); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } private void onListItemSelect(List list) { String[] items = list.getSelection(); status.setText(items[0]); } @SuppressWarnings("unused") public static void main(String[] args) { Display display = new Display(); ListWidgetEx ex = new ListWidgetEx(display); display.dispose(); } } ``` 在此示例中，從列表小部件中選擇的項目顯示在狀態欄中。 ```java status = new Label(shell, SWT.NONE); status.setText("Ready"); ``` 標簽小部件用于狀態欄。 SWT 不將本機窗口小部件用于狀態欄。 ```java FormLayout layout = new FormLayout(); layout.marginHeight = 5; layout.marginWidth = 5; layout.spacing = 5; shell.setLayout(layout); ``` 我們使用`FormLayout`小部件在窗口上排列小部件。設置了一些邊距和間距。 ```java FormData labelData = new FormData(); labelData.left = new FormAttachment(0); labelData.right = new FormAttachment(100); labelData.bottom = new FormAttachment(100); status.setLayoutData(labelData); ``` 此代碼將狀態標簽粘貼在窗口底部；狀態欄的通常位置。 ```java List list = new List(shell, SWT.BORDER); ``` `List`小部件已創建。默認選擇模式是單選。 ```java list.add("Aliens"); list.add("Capote"); list.add("Neverending story"); list.add("Starship troopers"); list.add("Exorcist"); list.add("Omen"); ``` 它充滿了數據。 ```java list.addListener(SWT.Selection, event -> onListItemSelect(list)); ``` 我們將選擇監聽器添加到`List`小部件。在列表選擇事件中，將調用`onListItemSelect()`方法。 ```java FormData listData = new FormData(); listData.width = 250; listData.height = 200; listData.left = new FormAttachment(shell, 0); listData.top = new FormAttachment(shell, 0); listData.right = new FormAttachment(100, 0); listData.bottom = new FormAttachment(status, 0); list.setLayoutData(listData); ``` 此代碼使`List`小部件占據了窗口區域的大部分。 `width`和`height`屬性指定列表的首選大小。 ```java private void onListItemSelect(List list) { String[] items = list.getSelection(); status.setText(items[0]); } ``` 在`onListItemSelect()`內部，我們確定列表中的選定項目并將其設置為狀態欄。 ![List widget](https://img.kancloud.cn/e6/24/e62443ba5d6f12d8d4c385da574dfae5_264x260.jpg) 圖：`List`小部件 ## `Slider` `Slider`是一個小部件，可讓用戶通過在有限間隔內滑動旋鈕以圖形方式選擇一個值。我們的示例將顯示音量控制。 `SliderEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.graphics.Device; import org.eclipse.swt.graphics.Image; import org.eclipse.swt.layout.RowData; import org.eclipse.swt.layout.RowLayout; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Label; import org.eclipse.swt.widgets.Shell; import org.eclipse.swt.widgets.Slider; /** * ZetCode Java SWT tutorial * * In this program, we use the slider * widget to create a volume control * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SliderEx { private Shell shell; private Label label; private Image mute; private Image min; private Image med; private Image max; public SliderEx(Display display) { initUI(display); } private void loadImages() { Device dev = shell.getDisplay(); try { mute = new Image(dev, "mute.png"); min = new Image(dev, "min.png"); med = new Image(dev, "med.png"); max = new Image(dev, "max.png"); } catch(Exception e) { System.out.println("Cannot load images"); System.out.println(e.getMessage()); System.exit(1); } } private void initUI(Display display) { shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER); loadImages(); RowLayout layout = new RowLayout(); layout.marginLeft = 30; layout.marginTop = 30; layout.spacing = 30; layout.fill = true; shell.setLayout(layout); Slider slider = new Slider(shell, SWT.HORIZONTAL); slider.setMaximum(100); slider.setLayoutData(new RowData(180, -1)); label = new Label(shell, SWT.IMAGE_PNG); label.setImage(mute); slider.addListener(SWT.Selection, event -> onSelection(slider)); shell.setText("Slider"); shell.setSize(350, 200); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } private void onSelection(Slider slider) { int value = slider.getSelection(); if (value == 0) { label.setImage(mute); label.pack(); } else if (value > 0 && value <= 30) { label.setImage(min); } else if (value > 30 && value < 80) { label.setImage(med); } else { label.setImage(max); } } @Override public void finalize() { mute.dispose(); med.dispose(); min.dispose(); max.dispose(); } public static void main(String[] args) { Display display = new Display(); SliderEx ex = new SliderEx(display); ex.finalize(); display.dispose(); } } ``` 在上面的示例中，我們有一個`Slider`和一個`Label`小部件。通過拖動滑塊的旋鈕，我們可以更改標簽中顯示的`Image`。 ```java try { mute = new Image(dev, "mute.png"); min = new Image(dev, "min.png"); med = new Image(dev, "med.png"); max = new Image(dev, "max.png"); } catch(Exception e) { System.out.println("Cannot load images"); System.out.println(e.getMessage()); System.exit(1); } ``` 圖像從磁盤加載。 ```java Slider slider = new Slider(shell, SWT.HORIZONTAL); slider.setMaximum(100); ``` `Slider`小部件已創建。最大值為 100。 ```java label = new Label(shell, SWT.IMAGE_PNG); label.setImage(mute); ``` 使用`SWT.IMAGE_PNG`參數，標簽窗口小部件顯示 PNG 圖像。 `setImage()`方法將圖像設置為標簽。 ```java slider.addListener(SWT.Selection, event -> onSelection(slider)); ``` 監聽器已添加到滑塊小部件。 ```java int value = slider.getSelection(); ``` 在`onSelection()`方法內部，我們使用`getSelection()`方法獲得滑塊控件的值。 ```java if (value == 0) { label.setImage(mute); label.pack(); } else if (value > 0 && value <= 30) { label.setImage(min); } else if (value > 30 && value < 80) { label.setImage(med); } else { label.setImage(max); } ``` 根據獲得的值，我們在標簽小部件中更改圖片。 ```java @Override public void finalize() { mute.dispose(); med.dispose(); min.dispose(); max.dispose(); } ``` 最后，資源被釋放。 ![Slider widget](https://img.kancloud.cn/01/1e/011e008cd22e915ad4eedc9756a6bb15_346x197.jpg) 圖：`Slider`小部件 ## `Combo`小部件 `Combo`是一個小部件，允許用戶從選項的下拉列表中進行選擇。 `ComboEx.java` ```java package com.zetcode; import org.eclipse.swt.SWT; import org.eclipse.swt.layout.RowData; import org.eclipse.swt.layout.RowLayout; import org.eclipse.swt.widgets.Combo; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Label; import org.eclipse.swt.widgets.Shell; /** * ZetCode Java SWT tutorial * * In this program, we use the Combo * widget to select an option. * The selected option is shown in the * Label widget. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ComboEx { private Label label; public ComboEx(Display display) { initUI(display); } private void initUI(Display display) { Shell shell = new Shell(display, SWT.SHELL_TRIM | SWT.CENTER); RowLayout layout = new RowLayout(SWT.VERTICAL); layout.marginLeft = 50; layout.marginTop = 30; layout.spacing = 30; shell.setLayout(layout); Combo combo = new Combo(shell, SWT.DROP_DOWN); combo.add("Ubuntu"); combo.add("Fedora"); combo.add("Arch"); combo.add("Red Hat"); combo.add("Mint"); combo.setLayoutData(new RowData(150, -1)); label = new Label(shell, SWT.LEFT); label.setText("..."); combo.addListener(SWT.Selection, event -> onSelected(combo)); shell.setText("Combo"); shell.setSize(300, 250); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } } private void onSelected(Combo combo) { label.setText(combo.getText()); label.pack(); } @SuppressWarnings("unused") public static void main(String[] args) { Display display = new Display(); ComboEx ex = new ComboEx(display); display.dispose(); } } ``` 該示例顯示了一個組合和一個標簽。該組合具有六個選項的列表。這些是 Linux 發行版的名稱。標簽窗口小部件顯示了從組合框中選擇的選項。 ```java Combo combo = new Combo(shell, SWT.DROP_DOWN); ``` `Combo`小部件已創建。 ```java combo.add("Ubuntu"); combo.add("Fedora"); combo.add("Mandriva"); combo.add("Red Hat"); combo.add("Mint"); ``` 組合框小部件充滿了數據。 ```java private void onSelected(Combo combo) { label.setText(combo.getText()); label.pack(); } ``` 我們將所選文本設置為標簽小部件。 `pack()`方法使標簽適合組合中新字符串的大小。 ![Combo widget](https://img.kancloud.cn/31/ea/31eaa4992bf57041a3601c8001234077_296x247.jpg) 圖：`Combo`小部件在 Java SWT 教程的這一部分中，我們描述了 SWT 庫的一些小部件。