原文: http://zetcode.com/gui/rubygtk/widgets/

在 Ruby GTK 编程教程的这一部分中,我们将介绍一些小部件。

小部件是 GUI 应用的基本构建块。 多年来,一些小部件已成为所有 OS 平台上所有工具包中的标准,例如按钮,复选框或滚动条。 GTK 工具箱的理念是将小部件的数量保持在最低水平。 将创建更多专门的窗口小部件作为自定义 GTK 窗口小部件。

Gtk::CheckButton

Gtk::CheckButton是具有两种状态的窗口小部件:开和关。 接通状态通过复选标记显示。 它用来表示一些布尔属性。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This program toggles the title of the
  5. window with the Gtk::CheckButton widget.
  6. Author: Jan Bodnar
  7. Website: www.zetcode.com
  8. Last modified: May 2014
  9. '''
  10. require 'gtk3'
  11. class RubyApp < Gtk::Window
  12. def initialize
  13. super
  14. init_ui
  15. end
  16. def init_ui
  17. fixed = Gtk::Fixed.new
  18. add fixed
  19. cb = Gtk::CheckButton.new "Show title"
  20. cb.set_active true
  21. cb.set_can_focus false
  22. cb.signal_connect("clicked") do |w|
  23. on_clicked w
  24. end
  25. fixed.put cb, 50, 50
  26. set_title "Gkt::CheckButton"
  27. signal_connect "destroy" do
  28. Gtk.main_quit
  29. end
  30. set_default_size 300, 200
  31. set_window_position :center
  32. show_all
  33. end
  34. def on_clicked sender
  35. if sender.active?
  36. self.set_title "Gtk::CheckButton"
  37. else
  38. self.set_title ""
  39. end
  40. end
  41. end
  42. Gtk.init
  43. window = RubyApp.new
  44. Gtk.main

根据Gtk::CheckButton的状态,我们将在窗口的标题栏中显示标题。

  1. cb = Gtk::CheckButton.new "Show title"

Gtk::CheckButton小部件已创建。

  1. cb.set_active true

默认情况下标题是可见的,因此我们首先激活复选按钮。

  1. if sender.active?
  2. self.set_title "Gtk::CheckButton"
  3. else
  4. self.set_title ""
  5. end

如果选中该按钮,我们将显示标题。 按钮的状态由active?方法确定。

Ruby GTK 中的小部件 - 图1

图:Gtk::CheckButton小部件

Gtk::Label

Gtk::Label小部件显示文本。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example demonstrates the Gtk::Label widget.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. $lyrics = %{Meet you downstairs in the bar and heard
  11. your rolled up sleeves and your skull t-shirt
  12. You say why did you do it with him today?
  13. and sniff me out like I was Tanqueray
  14. cause you're my fella, my guy
  15. hand me your stella and fly
  16. by the time I'm out the door
  17. you tear men down like Roger Moore
  18. I cheated myself
  19. like I knew I would
  20. I told ya, I was trouble
  21. you know that I'm no good}
  22. class RubyApp < Gtk::Window
  23. def initialize
  24. super
  25. init_ui
  26. end
  27. def init_ui
  28. set_title "You know I'm no Good"
  29. signal_connect "destroy" do
  30. Gtk.main_quit
  31. end
  32. set_border_width 10
  33. label = Gtk::Label.new $lyrics
  34. add label
  35. set_default_size 250, 200
  36. set_window_position :center
  37. show_all
  38. end
  39. end
  40. Gtk.init
  41. window = RubyApp.new
  42. Gtk.main

该代码示例在窗口上显示了一些歌词。

  1. $lyrics = %{Meet you downstairs in the bar and heard
  2. your rolled up sleeves and your skull t-shirt
  3. ...

我们创建多行文本。

  1. set_border_width 10

Gtk::Label小部件被一些空白包围。

  1. label = Gtk::Label.new $lyrics
  2. add label

Gtk::Label小部件已创建并添加到窗口。

Ruby GTK 中的小部件 - 图2

图:Gtk::Label小部件

Gtk::Entry

Gtk::Entry是单行文本输入字段。 该小部件用于输入文本数据。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example demonstrates the Gtk::Entry widget.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. fixed = Gtk::Fixed.new
  17. label = Gtk::Label.new "..."
  18. fixed.put label, 60, 40
  19. entry = Gtk::Entry.new
  20. fixed.put entry, 60, 100
  21. entry.signal_connect "key-release-event" do |w, e|
  22. on_key_release w, e, label
  23. end
  24. add fixed
  25. set_title "Gtk::Entry"
  26. signal_connect "destroy" do
  27. Gtk.main_quit
  28. end
  29. set_default_size 250, 200
  30. set_window_position :center
  31. show_all
  32. end
  33. def on_key_release sender, event, label
  34. label.set_text sender.text
  35. end
  36. end
  37. Gtk.init
  38. window = RubyApp.new
  39. Gtk.main

此示例显示了条目小部件和标签。 我们输入的文本将立即显示在标签小部件中。

  1. entry = Gtk::Entry.new

Gtk::Entry小部件已创建。

  1. entry.signal_connect "key-release-event" do |w, e|
  2. on_key_release(w, e, label)
  3. end

我们将on_key_release方法插入Entry小部件的key-release-event

  1. def on_key_release sender, event, label
  2. label.set_text sender.text
  3. end

我们从Gtk::Entry小部件获取文本并将其设置为标签。

Ruby GTK 中的小部件 - 图3

图:Entry小部件

Gtk::Image

Gtk::Image小部件显示图像。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example demonstrates the Gtk::Image widget.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. set_border_width 2
  17. image = Gtk::Image.new :file => "redrock.png"
  18. add image
  19. set_title "Red Rock"
  20. signal_connect "destroy" do
  21. Gtk.main_quit
  22. end
  23. set_window_position :center
  24. show_all
  25. end
  26. end
  27. Gtk.init
  28. window = RubyApp.new
  29. Gtk.main

在我们的示例中,我们在窗口上显示图像。

  1. set_border_width 2

我们在图像周围放置了一些空边框。

  1. image = Gtk::Image.new :file => "redrock.png"

Gtk::Image小部件已创建。 如果未成功加载文件,则该图像将包含“残破图像”图标。 因此,我们不添加错误检查代码。

  1. add image

窗口小部件已添加到容器中。

Gtk::ComboBoxText

Gtk::ComboBoxText是一个小部件,允许用户从文本选项列表中进行选择。

  1. #!/usr/bin/ruby
  2. '''
  3. ZetCode Ruby GTK tutorial
  4. This example demonstrates the Gtk::ComboBoxText widget.
  5. Author: Jan Bodnar
  6. Website: www.zetcode.com
  7. Last modified: May 2014
  8. '''
  9. require 'gtk3'
  10. class RubyApp < Gtk::Window
  11. def initialize
  12. super
  13. init_ui
  14. end
  15. def init_ui
  16. fixed = Gtk::Fixed.new
  17. label = Gtk::Label.new '-'
  18. fixed.put label, 50, 140
  19. cb = Gtk::ComboBoxText.new
  20. cb.signal_connect "changed" do |w, e|
  21. on_changed w, e, label
  22. end
  23. cb.append_text 'Xubuntu'
  24. cb.append_text 'Mandriva'
  25. cb.append_text 'Redhat'
  26. cb.append_text 'Gentoo'
  27. cb.append_text 'Arch'
  28. fixed.put cb, 50, 30
  29. add fixed
  30. set_title "Gtk::ComboBoxText"
  31. signal_connect "destroy" do
  32. Gtk.main_quit
  33. end
  34. set_default_size 300, 200
  35. set_window_position :center
  36. show_all
  37. end
  38. def on_changed sender, event, label
  39. label.set_label sender.active_text
  40. end
  41. end
  42. Gtk.init
  43. window = RubyApp.new
  44. Gtk.main

该示例显示了一个组合框和一个标签。 组合框具有五个选项的列表。 这些是 Linux Distros 的名称。 标签窗口小部件显示了从组合框中选择的选项。

  1. cb = Gtk::ComboBoxText.new

Gtk::ComboBoxText小部件已创建。

  1. cb.signal_connect "changed" do |w, e|
  2. on_changed w, e, label
  3. end

自定义on_changed方法插入到组合框的changed信号中。 每当更改组合框的活动项目时,都会发出该信号。 我们将三个参数传递给on_changed方法:发件人小部件(组合框),事件对象和标签小部件。

  1. cb.append_text 'Xubuntu'
  2. cb.append_text 'Mandriva'
  3. cb.append_text 'Redhat'
  4. cb.append_text 'Gentoo'
  5. cb.append_text 'Arch'

组合框充满数据。

  1. def on_changed sender, event, label
  2. label.set_label sender.active_text
  3. end

on_changed方法内部,我们从组合框中获取选定的文本并将其设置为标签。

Ruby GTK 中的小部件 - 图4

图:GtkComboBoxText小部件

在 Ruby GTK 教程的这一章中,我们展示了一些基本的小部件。