# Ruby GTK 中的小部件 > 原文： [http://zetcode.com/gui/rubygtk/widgets/](http://zetcode.com/gui/rubygtk/widgets/) 在 Ruby GTK 編程教程的這一部分中，我們將介紹一些小部件。 小部件是 GUI 應用的基本構建塊。 多年來，一些小部件已成為所有 OS 平臺上所有工具包中的標準，例如按鈕，復選框或滾動條。 GTK 工具箱的理念是將小部件的數量保持在最低水平。 將創建更多專門的窗口小部件作為自定義 GTK 窗口小部件。 ## `Gtk::CheckButton` `Gtk::CheckButton`是具有兩種狀態的窗口小部件：開和關。 接通狀態通過復選標記顯示。 它用來表示一些布爾屬性。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This program toggles the title of the window with the Gtk::CheckButton widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super init_ui end def init_ui fixed = Gtk::Fixed.new add fixed cb = Gtk::CheckButton.new "Show title" cb.set_active true cb.set_can_focus false cb.signal_connect("clicked") do |w| on_clicked w end fixed.put cb, 50, 50 set_title "Gkt::CheckButton" signal_connect "destroy" do Gtk.main_quit end set_default_size 300, 200 set_window_position :center show_all end def on_clicked sender if sender.active? self.set_title "Gtk::CheckButton" else self.set_title "" end end end Gtk.init window = RubyApp.new Gtk.main ``` 根據`Gtk::CheckButton`的狀態，我們將在窗口的標題欄中顯示標題。 ```rb cb = Gtk::CheckButton.new "Show title" ``` `Gtk::CheckButton`小部件已創建。 ```rb cb.set_active true ``` 默認情況下標題是可見的，因此我們首先激活復選按鈕。 ```rb if sender.active? self.set_title "Gtk::CheckButton" else self.set_title "" end ``` 如果選中該按鈕，我們將顯示標題。 按鈕的狀態由`active?`方法確定。  圖：`Gtk::CheckButton`小部件 ## `Gtk::Label` `Gtk::Label`小部件顯示文本。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This example demonstrates the Gtk::Label widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' $lyrics = %{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} class RubyApp < Gtk::Window def initialize super init_ui end def init_ui set_title "You know I'm no Good" signal_connect "destroy" do Gtk.main_quit end set_border_width 10 label = Gtk::Label.new $lyrics add label set_default_size 250, 200 set_window_position :center show_all end end Gtk.init window = RubyApp.new Gtk.main ``` 該代碼示例在窗口上顯示了一些歌詞。 ```rb $lyrics = %{Meet you downstairs in the bar and heard your rolled up sleeves and your skull t-shirt ... ``` 我們創建多行文本。 ```rb set_border_width 10 ``` `Gtk::Label`小部件被一些空白包圍。 ```rb label = Gtk::Label.new $lyrics add label ``` `Gtk::Label`小部件已創建并添加到窗口。  圖：`Gtk::Label`小部件 ## `Gtk::Entry` `Gtk::Entry`是單行文本輸入字段。 該小部件用于輸入文本數據。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This example demonstrates the Gtk::Entry widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super init_ui end def init_ui fixed = Gtk::Fixed.new label = Gtk::Label.new "..." fixed.put label, 60, 40 entry = Gtk::Entry.new fixed.put entry, 60, 100 entry.signal_connect "key-release-event" do |w, e| on_key_release w, e, label end add fixed set_title "Gtk::Entry" signal_connect "destroy" do Gtk.main_quit end set_default_size 250, 200 set_window_position :center show_all end def on_key_release sender, event, label label.set_text sender.text end end Gtk.init window = RubyApp.new Gtk.main ``` 此示例顯示了條目小部件和標簽。 我們輸入的文本將立即顯示在標簽小部件中。 ```rb entry = Gtk::Entry.new ``` `Gtk::Entry`小部件已創建。 ```rb entry.signal_connect "key-release-event" do |w, e| on_key_release(w, e, label) end ``` 我們將`on_key_release`方法插入`Entry`小部件的`key-release-event`。 ```rb def on_key_release sender, event, label label.set_text sender.text end ``` 我們從`Gtk::Entry`小部件獲取文本并將其設置為標簽。  圖：`Entry`小部件 ## `Gtk::Image` `Gtk::Image`小部件顯示圖像。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This example demonstrates the Gtk::Image widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super init_ui end def init_ui set_border_width 2 image = Gtk::Image.new :file => "redrock.png" add image set_title "Red Rock" signal_connect "destroy" do Gtk.main_quit end set_window_position :center show_all end end Gtk.init window = RubyApp.new Gtk.main ``` 在我們的示例中，我們在窗口上顯示圖像。 ```rb set_border_width 2 ``` 我們在圖像周圍放置了一些空邊框。 ```rb image = Gtk::Image.new :file => "redrock.png" ``` `Gtk::Image`小部件已創建。 如果未成功加載文件，則該圖像將包含“殘破圖像”圖標。 因此，我們不添加錯誤檢查代碼。 ```rb add image ``` 窗口小部件已添加到容器中。 ## `Gtk::ComboBoxText` `Gtk::ComboBoxText`是一個小部件，允許用戶從文本選項列表中進行選擇。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This example demonstrates the Gtk::ComboBoxText widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super init_ui end def init_ui fixed = Gtk::Fixed.new label = Gtk::Label.new '-' fixed.put label, 50, 140 cb = Gtk::ComboBoxText.new cb.signal_connect "changed" do |w, e| on_changed w, e, label end cb.append_text 'Xubuntu' cb.append_text 'Mandriva' cb.append_text 'Redhat' cb.append_text 'Gentoo' cb.append_text 'Arch' fixed.put cb, 50, 30 add fixed set_title "Gtk::ComboBoxText" signal_connect "destroy" do Gtk.main_quit end set_default_size 300, 200 set_window_position :center show_all end def on_changed sender, event, label label.set_label sender.active_text end end Gtk.init window = RubyApp.new Gtk.main ``` 該示例顯示了一個組合框和一個標簽。 組合框具有五個選項的列表。 這些是 Linux Distros 的名稱。 標簽窗口小部件顯示了從組合框中選擇的選項。 ```rb cb = Gtk::ComboBoxText.new ``` `Gtk::ComboBoxText`小部件已創建。 ```rb cb.signal_connect "changed" do |w, e| on_changed w, e, label end ``` 自定義`on_changed`方法插入到組合框的`changed`信號中。 每當更改組合框的活動項目時，都會發出該信號。 我們將三個參數傳遞給`on_changed`方法：發件人小部件（組合框），事件對象和標簽小部件。 ```rb cb.append_text 'Xubuntu' cb.append_text 'Mandriva' cb.append_text 'Redhat' cb.append_text 'Gentoo' cb.append_text 'Arch' ``` 組合框充滿數據。 ```rb def on_changed sender, event, label label.set_label sender.active_text end ``` 在`on_changed`方法內部，我們從組合框中獲取選定的文本并將其設置為標簽。  圖：`GtkComboBoxText`小部件 在 Ruby GTK 教程的這一章中，我們展示了一些基本的小部件。