# Ruby Qt 中的小部件 > 原文： [http://zetcode.com/gui/rubyqt/widgets/](http://zetcode.com/gui/rubyqt/widgets/) 在 Ruby Qt 編程教程的這一部分中，我們將介紹基本的小部件。 小部件是 GUI 應用的基本構建塊。 多年來，幾個小部件已成為所有 OS 平臺上所有工具包中的標準。 例如，按鈕，復選框或滾動條。 Qt 有一組豐富的小部件，可以滿足大多數編程需求。 可以將更多專門的窗口小部件創建為自定義窗口小部件。 ## `Qt::CheckBox` `Qt::CheckBox`是具有兩種狀態的窗口小部件：開和關。 接通狀態通過復選標記顯示。 它用來表示一些布爾屬性。 `Qt::CheckBox`小部件提供一個帶有文本標簽的復選框。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program uses Qt::CheckBox # widget to show/hide the title # of the window. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget slots 'on_toggled(bool)' def initialize super setWindowTitle "Qt::CheckBox" init_ui resize 250, 150 move 300, 300 show end def init_ui cb = Qt::CheckBox.new "Show Title", self cb.setChecked true connect cb, SIGNAL("toggled(bool)"), self, SLOT("on_toggled(bool)") cb.move 50, 50 end def on_toggled state if state setWindowTitle "Qt::CheckBox" else setWindowTitle "" end end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在我們的示例中，我們在窗口上放置了一個復選框。 復選框顯示或隱藏窗口的標題。 ```rb setWindowTitle "Qt::CheckBox" ``` 在構建窗口期間，我們為窗口設置標題。 ```rb cb = Qt::CheckBox.new "Show Title", self ``` `Qt::CheckBox`小部件已創建。 構造器的第一個參數是其文本標簽。 第二個參數是父窗口小部件。 ```rb cb.setChecked true ``` 標題在應用的開始處可見。 因此，也必須選中該復選框。 ```rb connect cb, SIGNAL("toggled(bool)"), self, SLOT("on_toggled(bool)") ``` 復選框的狀態更改時，會發出`toggled`信號。 發出信號時，我們觸發`on_toggled`方法。 ```rb if state setWindowTitle "Qt::CheckBox" else setWindowTitle "" end ``` 根據復選框的狀態，我們顯示或隱藏窗口的標題。  圖：`Qt::CheckBox` ## `Qt::Label` `Qt::Label`小部件用于顯示文本或圖像。 沒有用戶交互。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program uses Qt::Label widget to # show lyrics of a song. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "You know I'm no Good" init_ui resize 250, 150 move 300, 300 show end def init_ui 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\n 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\n I cheated myself like I knew I would I told ya, I was trouble you know that I'm no good" label = Qt::Label.new text, self label.setFont Qt::Font.new "Purisa", 9 vbox = Qt::VBoxLayout.new vbox.addWidget label setLayout vbox end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 我們的示例在窗口中顯示了歌曲的歌詞。 ```rb text = "Meet you downstairs in the bar and heard your rolled up sleeves and your skull t-shirt ... ``` 我們定義了多行文字。 ```rb label = Qt::Label.new text, self label.setFont Qt::Font.new "Purisa", 9 ``` 我們創建標簽小部件并更改其字體。 ```rb vbox = Qt::VBoxLayout.new vbox.addWidget label setLayout vbox ``` 代替手動編碼標簽的位置和大小，我們將標簽放入盒子布局中。  圖：`Qt::Label` ## `Qt::LineEdit` `Qt::LineEdit`是一個小部件，允許輸入和編輯單行純文本。 `Qt::LineEdit`小部件具有撤消/重做，剪切/粘貼和拖放功能。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program shows text # which is entered in a Qt::LineEdit # widget in a Qt::Label widget. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget slots 'on_changed(QString)' def initialize super setWindowTitle "LineEdit" init_ui resize 250, 150 move 300, 300 show end def init_ui @label = Qt::Label.new self edit = Qt::LineEdit.new self connect edit, SIGNAL("textChanged(QString)"), self, SLOT("on_changed(QString)") edit.move 60, 100 @label.move 60, 40 end def on_changed text @label.setText text @label.adjustSize end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在我們的示例中，我們顯示了兩個小部件。 行編輯和標簽小部件。 輸入到行編輯中的文本顯示在標簽窗口小部件中。 ```rb edit = Qt::LineEdit.new self ``` `Qt::LineEdit`小部件已創建。 ```rb connect edit, SIGNAL("textChanged(QString)"), self, SLOT("on_changed(QString)") ``` 當我們在行編輯中鍵入或刪除某些文本時，將觸發`on_changed`方法。 ```rb def on_changed text @label.setText text @label.adjustSize end ``` 在`on_changed`方法中，我們將行編輯的內容設置為標簽窗口小部件。 `adjustSize`方法確保所有文本都是可見的。  圖：`Qt::LineEdit`小部件 ## `ToggleButton` 切換按鈕是設置了可檢查標志的按鈕。 切換按鈕是具有兩種狀態的按鈕。 已按下但未按下。 通過單擊可以在這兩種狀態之間切換。 在某些情況下此功能非常合適。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program uses toggle buttons to # change the background colour of # a widget. # # author: Jan Bodnar # website: www.zetcode.com # last modified: September 2012 require 'Qt' class QtApp < Qt::Widget slots 'on_clicked()' def initialize super setWindowTitle "Toggle button" init_ui resize 300, 180 move 300, 300 show end def init_ui @color = Qt::Color.new 0, 0, 0 setGeometry 300, 300, 280, 170 setWindowTitle "ToggleButton" @redb = Qt::PushButton.new 'Red', self @redb.setCheckable true @redb.move 10, 10 connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()") @greenb = Qt::PushButton.new 'Green', self @greenb.setCheckable true @greenb.move 10, 60 connect @greenb, SIGNAL('clicked()'), SLOT("on_clicked()") @blueb = Qt::PushButton.new "Blue", self @blueb.setCheckable true @blueb.move 10, 110 connect @blueb, SIGNAL("clicked()"), SLOT("on_clicked()") @square = Qt::Widget.new self @square.setGeometry 150, 20, 100, 100 @square.setStyleSheet "QWidget { background-color: %s }" % @color.name end def on_clicked red = @color.red green = @color.green blue = @color.blue if @redb.isChecked red = 255 else red = 0 end if @greenb.isChecked green = 255 else green = 0 end if @blueb.isChecked blue = 255 else blue = 0 end @color = Qt::Color.new red, green, blue @square.setStyleSheet("QWidget { background-color: %s }" % @color.name) end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在代碼示例中，我們使用三個切換按鈕來更改矩形小部件的顏色。 ```rb @redb = Qt::PushButton.new 'Red', self @redb.setCheckable true ``` 我們創建一個`Qt::PushButton`小部件。 `setCheckable`方法將按鈕更改為切換按鈕。 ```rb connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()") ``` 我們將按鈕插入`on_clicked`方法調用中。 ```rb @square = Qt::Widget.new self @square.setGeometry 150, 20, 100, 100 @square.setStyleSheet "QWidget { background-color: %s }" % @color.name ``` 我們創建一個方形小部件。 我們設置它的大小。 一開始是黑色的。 在 Qt 中，我們使用樣式表來自定義小部件的外觀。 在`on_clicked`方法內部，我們確定顏色值并將正方形小部件更新為新顏色。 ```rb red = @color.red green = @color.green blue = @color.blue ``` 在這里，我們確定方形小部件的當前顏色。 ```rb if @redb.isChecked red = 255 else red = 0 end ``` 顏色的紅色部分根據紅色切換按鈕的狀態而改變。 ```rb @color = Qt::Color.new red, green, blue ``` 我們創建一個新的顏色值。 ```rb @square.setStyleSheet("QWidget { background-color: %s }" % @color.name) ``` 正方形的顏色已更新。  圖：開關按鈕 ## `Qt::ComboBox` `Qt::ComboBox`是一個小部件，允許用戶從選項列表中進行選擇。 這是一個顯示當前項目的選擇小部件，可以彈出可選擇項目的列表。 組合框可能是可編輯的。 它以占用最少屏幕空間的方式向用戶顯示選項列表。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program uses the Qt::ComboBox widget. # The option selected from the combo box is # displayed in the label widget. # # author: Jan Bodnar # website: www.zetcode.com # last modified: Sepetmber 2012 require 'Qt' class QtApp < Qt::Widget slots 'on_activated(QString)' def initialize super setWindowTitle "Qt::ComboBox" init_ui resize 250, 150 move 300, 300 show end def init_ui @label = Qt::Label.new "Ubuntu", self combo = Qt::ComboBox.new self combo.addItem "Ubuntu" combo.addItem "Fedora" combo.addItem "Mandriva" combo.addItem "Red Hat" combo.addItem "Mint" connect combo, SIGNAL("activated(QString)"), self, SLOT("on_activated(QString)") combo.move 50, 30 @label.move 50, 100 end def on_activated text @label.setText text @label.adjustSize end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在我們的代碼示例中，我們有兩個小部件：組合框和標簽小部件。 從組合框中選擇的選項顯示在標簽中。 ```rb @label = Qt::Label.new "Ubuntu", self ``` 這是一個標簽，它將顯示組合框中當前選擇的選項。 ```rb combo = Qt::ComboBox.new self ``` 我們創建`Qt::ComboBox`小部件的實例。 ```rb combo.addItem "Ubuntu" combo.addItem "Fedora" combo.addItem "Mandriva" combo.addItem "Red Hat" combo.addItem "Mint" ``` 組合框將填充值。 ```rb connect combo, SIGNAL("activated(QString)"), self, SLOT("on_activated(QString)") ``` 當我們從組合框中選擇一個選項時，將觸發`on_activated`方法。 ```rb def on_activated text @label.setText text @label.adjustSize end ``` 在`on_activated`方法中，我們將標簽小部件更新為從組合框中選擇的當前字符串。  圖：`Qt::ComboBox`小部件 在 Ruby Qt 教程的這一部分中，我們介紹了幾個 Qt 小部件。