{% raw %} # Qyoto 中的小部件 > 原文： [http://zetcode.com/gui/csharpqyoto/widgets/](http://zetcode.com/gui/csharpqyoto/widgets/) 在 Qyoto C# 編程教程的這一部分中，我們將介紹 Qyoto 小部件。 小部件是 GUI 應用的基本構建塊。 多年來，幾個小部件已成為所有 OS 平臺上所有工具包中的標準。 例如，按鈕，復選框或滾動條。 Qyoto 有一組豐富的小部件，可以滿足大多數編程需求。 可以將更多專門的窗口小部件創建為自定義窗口小部件。 ## `QCheckBox` `QCheckBox`是具有兩種狀態的窗口小部件：開和關。 接通狀態通過復選標記顯示。 它用來表示一些布爾屬性。 `QCheckBox`小部件提供一個帶有文本標簽的復選框。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program uses QCheckBox * widget to show/hide the title * of the window. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "QCheckBox"; SetupUI(); Resize(250, 150); Move(300, 300); Show(); } public void SetupUI() { QCheckBox cb = new QCheckBox("Show Title", this); cb.Checked = true; cb.Move(50, 50); cb.StateChanged += ShowTitle; } [Q_SLOT] public void ShowTitle(int state) { if (state == (int) CheckState.Checked) { WindowTitle = "QCheckBox"; } else { WindowTitle = ""; } } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在我們的示例中，我們在窗口上放置了一個復選框。 復選框顯示/隱藏窗口的標題。 ```cs WindowTitle = "QCheckBox"; ``` 在構建窗口期間，我們為窗口設置標題。 ```cs QCheckBox cb = new QCheckBox("Show Title", this); ``` `QCheckBox`小部件已創建。 構造器的第一個參數是其文本標簽。 第二個參數是父窗口小部件。 ```cs cb.Checked = true; ``` 標題在應用的開始處可見。 因此，也必須選中該復選框。 我們通過`Checked`屬性選中該復選框。 ```cs cb.StateChanged += ShowTitle; ``` 我們將`ShowTitle()`方法插入`StateChange`事件。 復選框的狀態更改時，將發出事件。 ```cs [Q_SLOT] public void ShowTitle(int state) { ... } ``` 方法定義之前帶有`Q_SLOT`屬性。 此屬性通知編譯器有關自定義槽的信息。 ```cs if (state == (int) CheckState.Checked) { WindowTitle = "QCheckBox"; } else { WindowTitle = ""; } ``` 根據復選框的狀態，我們顯示或隱藏窗口的標題。  圖：`QCheckBox` ## `QLabel` `QLabel`小部件用于顯示文本或圖像。 沒有用戶交互。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program uses QLabel to * show lyrics of a song. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { public QyotoApp() { WindowTitle = "You know I'm no Good"; InitUI(); Resize(250, 150); Move(300, 300); Show(); } public void InitUI() { string text = @"Meet you downstairs in the bar and heard your rolled up sleeves and your skull t-shirt You say why did you do it with him today? and sniff me out like I was Tanqueray cause you're my fella, my guy hand me your stella and fly by the time I'm out the door you tear men down like Roger Moore I cheated myself like I knew I would I told ya, I was trouble you know that I'm no good"; QLabel label = new QLabel(text, this); label.Font = new QFont("Purisa", 9); QVBoxLayout vbox = new QVBoxLayout(); vbox.AddWidget(label); Layout = vbox; } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 我們的示例在窗口中顯示了歌曲的歌詞。 ```cs string text = @"Meet you downstairs in the bar and heard ... ``` 我們定義了多行文字。 多行文本在 C# 語言中以`@`字符開頭。 ```cs QLabel label = new QLabel(text, this); label.Font = new QFont("Purisa", 9); ``` 我們創建標簽小部件并更改其字體。 ```cs QVBoxLayout vbox = new QVBoxLayout(); vbox.AddWidget(label); Layout = vbox; ``` 代替手動編碼標簽的位置和大小，我們將標簽放入盒子布局中。  圖：`QLabel` ## `QLineEdit` `QLineEdit`是一個小部件，允許輸入和編輯單行純文本。 `QLineEdit`小部件具有撤消/重做，剪切/粘貼和拖放功能。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program shows text * which is entered in a QLineEdit * widget in a QLabel widget. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { QLabel label; public QyotoApp() { WindowTitle = "QLineEdit"; InitUI(); Resize(250, 150); Move(400, 300); Show(); } public void InitUI() { label = new QLabel(this); QLineEdit edit = new QLineEdit(this); edit.TextChanged += OnChanged; edit.Move(60, 100); label.Move(60, 40); } [Q_SLOT] public void OnChanged(string text) { label.Text = text; label.AdjustSize(); } [STAThread] public static int Main(string[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在我們的示例中，我們顯示了兩個小部件。 行編輯和標簽小部件。 輸入到行編輯中的文本顯示在標簽窗口小部件中。 ```cs QLineEdit edit = new QLineEdit(this); ``` `QLineEdit`小部件已創建。 ```cs edit.TextChanged += OnChanged; ``` 當我們在行編輯中鍵入或刪除某些文本時，將觸發`OnChanged()`方法。 該方法采用字符串參數。 ```cs [Q_SLOT] public void OnChanged(string text) { label.Text = text; label.AdjustSize(); } ``` 在`OnChanged()`方法中，我們將行編輯的內容設置為標簽窗口小部件。 `AdjustSize()`方法確保所有文本都是可見的。  圖：`QLineEdit`小部件 ## `ToggleButton` 切換按鈕是設置了可檢查標志的按鈕。 切換按鈕是具有兩種狀態的按鈕。 已按下但未按下。 通過單擊可以在這兩種狀態之間切換。 在某些情況下此功能非常合適。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program uses toggle buttons to * change the background colour of * a widget. * * @author Jan Bodnar * website zetcode.com * last modified October 2012 */ public class QyotoApp : QWidget { QWidget square; QColor col; QPushButton redb; QPushButton greenb; QPushButton blueb; public QyotoApp() { WindowTitle = "Toggle buttons"; InitUI(); Resize(350, 240); Move(400, 300); Show(); } private void InitUI() { col = new QColor(); redb = new QPushButton("Red", this); redb.Checkable = true; greenb = new QPushButton("Green", this); greenb.Checkable = true; blueb = new QPushButton("Blue", this); blueb.Checkable = true; redb.Toggled += OnToggled; greenb.Toggled += OnToggled; blueb.Toggled += OnToggled; square = new QWidget(this); square.StyleSheet = "QWidget { background-color: black }"; redb.Move(30, 30); greenb.Move(30, 80); blueb.Move(30, 130); square.SetGeometry(150, 25, 150, 150); } [Q_SLOT] public void OnToggled(bool @checked) { int red = col.Red; int green = col.Green; int blue = col.Blue; if (redb.Checked) { red = 255; } else { red = 0; } if (greenb.Checked) { green = 255; } else { green = 0; } if (blueb.Checked) { blue = 255; } else { blue = 0; } col = new QColor(red, green, blue); string sheet = System.String.Format("QWidget {{ background-color: {0} }}", col.Name()); square.StyleSheet = sheet; } [STAThread] public static int Main(string[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在代碼示例中，我們使用三個切換按鈕來更改矩形小部件的顏色。 ```cs QWidget square; QColor color; QPushButton redb; QPushButton greenb; QPushButton blueb; ``` 我們定義了五個對象。 方形小部件是`QWidget`，它顯示顏色。 `color`變量用于保存顏色值。 這三個按鈕是切換按鈕，用于混合顏色值。 ```cs redb = new QPushButton("Red", this); redb.Checkable = true; ``` 我們創建一個`QPushButton`小部件。 `Checkable`屬性將按鈕更改為切換按鈕。 ```cs redb.Toggled += OnToggled; greenb.Toggled += OnToggled; blueb.Toggled += OnToggled; ``` 所有三個按鈕都插入到一個方法調用中，即`OnToggled()`方法。 ```cs square = new QWidget(this); square.StyleSheet = "QWidget { background-color: black }"; ``` 我們創建方形小部件。 一開始是黑色的。 在 Qyoto 中，我們使用樣式表來自定義小部件的外觀。 在`OnToggled()`方法內部，我們確定顏色值并將正方形小部件更新為新顏色。 ```cs int red = col.Red; int green = col.Green; int blue = col.Blue; ``` 在這里，我們確定方形小部件的當前顏色。 ```cs if (redb.Checked) { red = 255; } else { red = 0; } ``` 根據紅色切換按鈕的狀態，更改顏色的紅色部分。 ```cs col = new QColor(red, green, blue); ``` 我們創建一個新的顏色值。 ```cs string sheet = System.String.Format("QWidget {{ background-color: {0} }}", col.Name()); ``` 我們使用 C# `Format`方法創建適當的樣式表。 ```cs square.StyleSheet = sheet; ``` 正方形的顏色已更新。  圖：開關按鈕 ## `QComboBox` `QComboBox`是一個小部件，允許用戶從選項列表中進行選擇。 這是一個顯示當前項目的選擇小部件，可以彈出可選擇項目的列表。 組合框可能是可編輯的。 它以占用最少屏幕空間的方式向用戶顯示選項列表。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# 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 October 2012 */ public class QyotoApp : QWidget { QLabel label; public QyotoApp() { WindowTitle = "QComboBox"; InitUI(); Resize(250, 150); Move(300, 300); Show(); } public void InitUI() { label = new QLabel("Ubuntu", this); QComboBox combo = new QComboBox(this); combo.AddItem("Ubuntu"); combo.AddItem("Arch"); combo.AddItem("Fedora"); combo.AddItem("Red Hat"); combo.AddItem("Gentoo"); combo.Move(50, 30); label.Move(50, 100); combo.ActivatedString += OnActivated; } [Q_SLOT] public void OnActivated(string text) { label.Text = text; label.AdjustSize(); } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在我們的代碼示例中，我們有兩個小部件。 組合框和標簽小部件。 從組合框中選擇的選項顯示在標簽中。 ```cs label = new QLabel("Ubuntu", this); ``` 這是一個標簽，它將顯示組合框中當前選擇的選項。 ```cs QComboBox combo = new QComboBox(this); ``` 我們創建`QComboBox`小部件的實例。 ```cs combo.AddItem("Ubuntu"); combo.AddItem("Arch"); combo.AddItem("Fedora"); combo.AddItem("Red Hat"); combo.AddItem("Gentoo"); ``` 組合框將填充值。 ```cs combo.ActivatedString += OnActivated; ``` 當我們從組合框中選擇一個選項時，將觸發`OnActivated()`方法。 ```cs [Q_SLOT] public void OnActivated(string text) { label.Text = text; label.AdjustSize(); } ``` 在`OnActivated()`方法中，我們將標簽小部件更新為從組合框中選擇的當前字符串。  圖：`QComboBox`小部件 在 Qyoto C# 教程的這一部分中，我們介紹了幾個 Qyoto 小部件。 {% endraw %}