# QtJambi 中的小部件 > 原文： [http://zetcode.com/gui/qtjambi/widgets/](http://zetcode.com/gui/qtjambi/widgets/) 在 QtJambi 編程教程的這一部分中，我們將介紹 QtJambi 小部件。 小部件是 GUI 應用的基本構建塊。 多年來，幾個小部件已成為所有 OS 平臺上所有工具包中的標準。 例如，按鈕，復選框或滾動條。 QtJambi 有一組豐富的小部件，可以滿足大多數編程需求。 可以將更多專門的窗口小部件創建為自定義窗口小部件。 ## `QCheckBox` `QCheckBox`是具有兩種狀態的窗口小部件：開和關。 接通狀態通過復選標記顯示。 它用來表示一些布爾屬性。 `QCheckBox`小部件提供一個帶有文本標簽的復選框。 ```java package com.zetcode; import com.trolltech.qt.core.Qt.FocusPolicy; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QCheckBox; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program uses QCheckBox * widget to show/hide the title * of the window * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("QCheckBox"); initUI(); resize(250, 150); move(300, 300); show(); } public void initUI() { QCheckBox cb = new QCheckBox("Show Title", this); cb.setFocusPolicy(FocusPolicy.NoFocus); cb.setChecked(true); cb.toggled.connect(this, "onChanged(boolean)"); cb.move(50, 50); } public void onChanged(boolean state) { if (state) { setWindowTitle("QCheckBox"); } else { setWindowTitle(""); } } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在我們的示例中，我們在窗口上放置了一個復選框。 復選框顯示/隱藏窗口的標題。 ```java setWindowTitle("QCheckBox"); ``` 在構建窗口期間，我們為窗口設置標題。 ```java QCheckBox cb = new QCheckBox("Show Title", this); ``` `QCheckBox`小部件已創建。 構造器的第一個參數是其文本標簽。 第二個參數是父窗口小部件。 ```java cb.setFocusPolicy(FocusPolicy.NoFocus); ``` 我不喜歡聚焦復選框的視覺表示。 此行禁用焦點。 ```java cb.setChecked(true); ``` 標題在應用的開始處可見。 因此，也必須選中該復選框。 ```java cb.toggled.connect(this, "onChanged(boolean)"); ``` 復選框的狀態更改時，會發出`toggled()`信號。 發出信號時，我們觸發`onChanged()`方法。 ```java if (state) { setWindowTitle("QCheckBox"); } else { setWindowTitle(""); } ``` 根據復選框的狀態，我們顯示或隱藏窗口的標題。  圖：`QCheckBox` ## `QLabel` `QLabel`小部件用于顯示文本或圖像。 沒有用戶交互。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QFont; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QVBoxLayout; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program uses QLabel to * show lyrics of a song * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("You know I'm no Good"); initUI(); move(300, 300); show(); } private void initUI() { String text = "Meet you downstairs in the bar and heard\n" + "your rolled up sleeves and your skull t-shirt\n" + "You say why did you do it with him today?\n" + "and sniff me out like I was Tanqueray\n\n" + "cause you're my fella, my guy\n" + "hand me your stella and fly\n" + "by the time I'm out the door\n" + "you tear men down like Roger Moore\n\n" + "I cheated myself\n" + "like I knew I would\n" + "I told ya, I was trouble\n" + "you know that I'm no good"; QLabel label = new QLabel(text, this); label.setFont(new QFont("Purisa", 9)); QVBoxLayout vbox = new QVBoxLayout(); vbox.addWidget(label); setLayout(vbox); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 我們的示例在窗口中顯示了歌曲的歌詞。 ```java String text = "Meet you downstairs in the bar and heard\n" + ... ``` 我們定義了多行文字。 ```java QLabel label = new QLabel(text, this); label.setFont(new QFont("Purisa", 9)); ``` 我們創建標簽小部件并更改其字體。 ```java QVBoxLayout vbox = new QVBoxLayout(); vbox.addWidget(label); setLayout(vbox); ``` 代替手動編碼標簽的位置和大小，我們將標簽放入盒子布局中。  圖：`QLabel` ## `QLineEdit` `QLineEdit`是一個小部件，允許輸入和編輯單行純文本。 `QLineEdit`小部件具有撤消/重做，剪切/粘貼和拖放功能。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QLineEdit; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program shows text * which is entered in a QLineEdit * widget in a QLabel widget * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { QLabel label; public JambiApp() { setWindowTitle("QLineEdit"); initUI(); resize(250, 200); move(300, 300); show(); } private void initUI() { label = new QLabel(this); QLineEdit edit = new QLineEdit(this); edit.textChanged.connect(this, "onChanged(String)"); edit.move(60, 100); label.move(60, 40); } private void onChanged(String text) { label.setText(text); label.adjustSize(); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在我們的示例中，我們顯示了兩個小部件。 行編輯和標簽小部件。 輸入到行編輯中的文本顯示在標簽窗口小部件中。 ```java QLineEdit edit = new QLineEdit(this); ``` `QLineEdit`小部件已創建。 ```java edit.textChanged.connect(this, "onChanged(String)"); ``` 當我們在行編輯中鍵入或刪除某些文本時，將觸發`onChanged()`方法。 ```java private void onChanged(String text) { label.setText(text); label.adjustSize(); } ``` 在`onChanged()`方法中，我們將行編輯的內容設置為標簽窗口小部件。 `adjustSize()`方法確保所有文本都是可見的。  圖：`QLineEdit`小部件 ## `ToggleButton` 切換按鈕是設置了可檢查標志的按鈕。 切換按鈕是具有兩種狀態的按鈕。 已按下但未按下。 通過單擊可以在這兩種狀態之間切換。 在某些情況下此功能非常合適。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QPushButton; import com.trolltech.qt.gui.QWidget; import java.util.Formatter; /** * ZetCode QtJambi tutorial * * This program uses toggle buttons to * change the background color of * a widget * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { private QWidget square; private QColor color; private QPushButton redb; private QPushButton greenb; private QPushButton blueb; public JambiApp() { setWindowTitle("Toggle Buttons"); initUI(); resize(350, 240); move(300, 300); show(); } private void initUI() { color = new QColor(); redb = new QPushButton("Red", this); redb.setCheckable(true); greenb = new QPushButton("Green", this); greenb.setCheckable(true); blueb = new QPushButton("Blue", this); blueb.setCheckable(true); redb.toggled.connect(this, "onToggled()"); greenb.toggled.connect(this, "onToggled()"); blueb.toggled.connect(this, "onToggled()"); square = new QWidget(this); square.setStyleSheet("QWidget { background-color: black }"); redb.move(30, 30); greenb.move(30, 80); blueb.move(30, 130); square.setGeometry(150, 25, 150, 150); } public void onToggled() { int red = color.red(); int green = color.green(); int blue = color.blue(); if (redb.isChecked()) { red = 255; } else { red = 0; } if (greenb.isChecked()) { green = 255; } else { green = 0; } if (blueb.isChecked()) { blue = 255; } else { blue = 0; } color = new QColor(red, green, blue); Formatter fmt = new Formatter(); fmt.format("QWidget { background-color: %s }", color.name()); square.setStyleSheet(fmt.toString()); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在代碼示例中，我們使用三個切換按鈕來更改矩形小部件的顏色。 ```java private QWidget square; private QColor color; private QPushButton redb; private QPushButton greenb; private QPushButton blueb; ``` 我們定義了五個對象。 正方形小部件是`QWidget`，它顯示顏色。 `color`變量用于保存顏色值。 這三個按鈕是切換按鈕，用于混合顏色值。 ```java redb = new QPushButton("Red", this); redb.setCheckable(true); ``` 我們創建一個`QPushButton`小部件。 `setCheckable()`方法將按鈕更改為切換按鈕。 ```java redb.toggled.connect(this, "onToggled()"); greenb.toggled.connect(this, "onToggled()"); blueb.toggled.connect(this, "onToggled()"); ``` 所有三個按鈕都插入到一個方法調用中，即`onToggled()`方法。 ```java square = new QWidget(this); square.setStyleSheet("QWidget { background-color: black }"); ``` 我們創建方形小部件。 一開始是黑色的。 在 QtJambi 中，我們使用樣式表來自定義小部件的外觀。 在`onToggled()`方法內部，我們確定顏色值并將正方形小部件更新為新顏色。 ```java int red = color.red(); int green = color.green(); int blue = color.blue(); ``` 在這里，我們確定方形小部件的當前顏色。 ```java if (redb.isChecked()) { red = 255; } else { red = 0; } ``` 根據紅色切換按鈕的狀態，更改顏色的紅色部分。 ```java color = new QColor(red, green, blue); ``` 我們創建一個新的顏色值。 ```java Formatter fmt = new Formatter(); fmt.format("QWidget { background-color: %s }", color.name()); ``` 這兩行創建樣式表的文本。 我們使用 Java `Formatter`對象。 ```java square.setStyleSheet(fmt.toString()); ``` 正方形的顏色已更新。  圖：開關按鈕 ## `QComboBox` `QComboBox`是一個小部件，允許用戶從選項列表中進行選擇。 這是一個顯示當前項目的選擇小部件，可以彈出可選擇項目的列表。 組合框可能是可編輯的。 它以占用最少屏幕空間的方式向用戶顯示選項列表。 ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QComboBox; import com.trolltech.qt.gui.QLabel; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program uses the QComboBox widget. * The option selected from the combo box is * displayed in the label widget. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { QLabel label; public JambiApp() { setWindowTitle("QComboBox"); initUI(); resize(250, 200); move(300, 300); show(); } private void initUI() { label = new QLabel("Ubuntu", this); QComboBox combo = new QComboBox(this); combo.addItem("Ubuntu"); combo.addItem("Fedora"); combo.addItem("Mandriva"); combo.addItem("Red Hat"); combo.addItem("Mint"); combo.currentStringChanged.connect(this, "OnActivated(String)"); combo.move(50, 30); label.move(50, 100); } private void OnActivated(String text) { label.setText(text); label.adjustSize(); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在我們的代碼示例中，我們有兩個小部件。 組合框和標簽小部件。 從組合框中選擇的選項顯示在標簽中。 ```java label = new QLabel("Ubuntu", this); ``` 這是一個標簽，它將顯示組合框中當前選擇的選項。 ```java QComboBox combo = new QComboBox(this); ``` 我們創建`QComboBox`小部件的實例。 ```java combo.addItem("Ubuntu"); combo.addItem("Fedora"); combo.addItem("Mandriva"); combo.addItem("Red Hat"); combo.addItem("Mint"); ``` 組合框將填充值。 ```java combo.currentStringChanged.connect(this, "OnActivated(String)"); ``` 當我們從組合框中選擇一個選項時，將觸發`OnActivated()`方法。 ```java private void OnActivated(String text) { label.setText(text); label.adjustSize(); } ``` 在`OnActivated()`方法中，我們將標簽小部件更新為從組合框中選擇的當前字符串。  圖：`QComboBox`小部件 在 QtJambi 教程的這一部分中，我們介紹了幾個 QtJambi 小部件。