原文： http://zetcode.com/gui/rubyqt/widgets/

在 Ruby Qt 编程教程的这一部分中，我们将介绍基本的小部件。

小部件是 GUI 应用的基本构建块。 多年来，几个小部件已成为所有 OS 平台上所有工具包中的标准。 例如，按钮，复选框或滚动条。 Qt 有一组丰富的小部件，可以满足大多数编程需求。 可以将更多专门的窗口小部件创建为自定义窗口小部件。

Qt::CheckBox

Qt::CheckBox是具有两种状态的窗口小部件：开和关。 接通状态通过复选标记显示。 它用来表示一些布尔属性。 Qt::CheckBox小部件提供一个带有文本标签的复选框。

  1. #!/usr/bin/ruby
  3. # ZetCode Ruby Qt tutorial
  4. #
  5. # This program uses Qt::CheckBox
  6. # widget to show/hide the title
  7. # of the window.
  8. #
  9. # author: Jan Bodnar
  10. # website: www.zetcode.com
  11. # last modified: September 2012
  13. require 'Qt'
  15. class QtApp < Qt::Widget
  17.     slots 'on_toggled(bool)'
  19.     def initialize
  20.         super
  22.         setWindowTitle "Qt::CheckBox"
  24.         init_ui
  26.         resize 250, 150
  27.         move 300, 300
  29.         show
  30.     end
  32.     def init_ui
  33.         cb = Qt::CheckBox.new "Show Title", self
  34.         cb.setChecked true
  35.         connect cb, SIGNAL("toggled(bool)"), 
  36.             self, SLOT("on_toggled(bool)")
  38.         cb.move 50, 50
  40.     end
  42.     def on_toggled state
  43.         if state
  44.             setWindowTitle "Qt::CheckBox"
  45.         else
  46.             setWindowTitle ""
  47.         end
  48.     end
  50. end
  52. app = Qt::Application.new ARGV
  53. QtApp.new
  54. app.exec

在我们的示例中，我们在窗口上放置了一个复选框。 复选框显示或隐藏窗口的标题。

  1. setWindowTitle "Qt::CheckBox"

在构建窗口期间，我们为窗口设置标题。

  1. cb = Qt::CheckBox.new "Show Title", self

Qt::CheckBox小部件已创建。 构造器的第一个参数是其文本标签。 第二个参数是父窗口小部件。

  1. cb.setChecked true

标题在应用的开始处可见。 因此，也必须选中该复选框。

  1. connect cb, SIGNAL("toggled(bool)"), 
  2.     self, SLOT("on_toggled(bool)")

复选框的状态更改时，会发出toggled信号。 发出信号时，我们触发on_toggled方法。

  1. if state
  2.     setWindowTitle "Qt::CheckBox"
  3. else
  4.     setWindowTitle ""
  5. end

根据复选框的状态，我们显示或隐藏窗口的标题。

Ruby Qt 中的小部件 - 图1

图：Qt::CheckBox

Qt::Label

Qt::Label小部件用于显示文本或图像。 没有用户交互。

  1. #!/usr/bin/ruby
  3. # ZetCode Ruby Qt tutorial
  4. #
  5. # This program uses Qt::Label widget to 
  6. # show lyrics of a song.
  7. #
  8. # author: Jan Bodnar
  9. # website: www.zetcode.com
  10. # last modified: September 2012
  12. require 'Qt'
  14. class QtApp < Qt::Widget
  16.     def initialize
  17.         super
  19.         setWindowTitle "You know I'm no Good"
  21.         init_ui
  23.         resize 250, 150
  24.         move 300, 300
  26.         show
  27.     end
  29.     def init_ui
  30.        text = "Meet you downstairs in the bar and heard
  31. your rolled up sleeves and your skull t-shirt
  32. You say why did you do it with him today?
  33. and sniff me out like I was Tanqueray\n
  34. cause you're my fella, my guy
  35. hand me your stella and fly
  36. by the time I'm out the door
  37. you tear men down like Roger Moore\n
  38. I cheated myself
  39. like I knew I would
  40. I told ya, I was trouble
  41. you know that I'm no good"
  43.         label = Qt::Label.new text, self
  44.         label.setFont Qt::Font.new "Purisa", 9
  46.         vbox = Qt::VBoxLayout.new
  47.         vbox.addWidget label
  48.         setLayout vbox
  49.     end   
  50. end
  52. app = Qt::Application.new ARGV
  53. QtApp.new
  54. app.exec

我们的示例在窗口中显示了歌曲的歌词。

  1.        text = "Meet you downstairs in the bar and heard
  2. your rolled up sleeves and your skull t-shirt
  3. ...

我们定义了多行文字。

  1. label = Qt::Label.new text, self
  2. label.setFont Qt::Font.new "Purisa", 9

我们创建标签小部件并更改其字体。

  1. vbox = Qt::VBoxLayout.new
  2. vbox.addWidget label
  3. setLayout vbox

代替手动编码标签的位置和大小，我们将标签放入盒子布局中。

Ruby Qt 中的小部件 - 图2

图：Qt::Label

Qt::LineEdit

Qt::LineEdit是一个小部件，允许输入和编辑单行纯文本。 Qt::LineEdit小部件具有撤消/重做，剪切/粘贴和拖放功能。

  1. #!/usr/bin/ruby
  3. # ZetCode Ruby Qt tutorial
  4. #
  5. # This program shows text
  6. # which is entered in a Qt::LineEdit
  7. # widget in a Qt::Label widget.
  8. #
  9. # author: Jan Bodnar
  10. # website: www.zetcode.com
  11. # last modified: September 2012
  13. require 'Qt'
  15. class QtApp < Qt::Widget
  17.     slots 'on_changed(QString)'
  19.     def initialize
  20.         super
  22.         setWindowTitle "LineEdit"
  24.         init_ui
  26.         resize 250, 150
  27.         move 300, 300
  29.         show
  30.     end
  32.     def init_ui
  34.         @label = Qt::Label.new self
  36.         edit = Qt::LineEdit.new self
  37.         connect edit, SIGNAL("textChanged(QString)"),
  38.             self, SLOT("on_changed(QString)")
  40.         edit.move 60, 100
  41.         @label.move 60, 40
  43.     end
  45.     def on_changed text
  46.         @label.setText text
  47.         @label.adjustSize
  48.     end
  50. end
  52. app = Qt::Application.new ARGV
  53. QtApp.new
  54. app.exec

在我们的示例中，我们显示了两个小部件。 行编辑和标签小部件。 输入到行编辑中的文本显示在标签窗口小部件中。

  1. edit = Qt::LineEdit.new self

Qt::LineEdit小部件已创建。

  1. connect edit, SIGNAL("textChanged(QString)"),
  2.     self, SLOT("on_changed(QString)")

当我们在行编辑中键入或删除某些文本时，将触发on_changed方法。

  1. def on_changed text
  2.     @label.setText text
  3.     @label.adjustSize
  4. end

在on_changed方法中，我们将行编辑的内容设置为标签窗口小部件。 adjustSize方法确保所有文本都是可见的。

Ruby Qt 中的小部件 - 图3

图：Qt::LineEdit小部件

ToggleButton

切换按钮是设置了可检查标志的按钮。 切换按钮是具有两种状态的按钮。 已按下但未按下。 通过单击可以在这两种状态之间切换。 在某些情况下此功能非常合适。

  1. #!/usr/bin/ruby
  3. # ZetCode Ruby Qt tutorial
  4. #
  5. # This program uses toggle buttons to
  6. # change the background colour of
  7. # a widget.
  8. #
  9. # author: Jan Bodnar
  10. # website: www.zetcode.com
  11. # last modified: September 2012
  13. require 'Qt'
  15. class QtApp < Qt::Widget
  17.     slots 'on_clicked()'
  19.     def initialize
  20.         super
  22.         setWindowTitle "Toggle button"
  24.         init_ui
  26.         resize 300, 180
  27.         move 300, 300
  29.         show
  30.     end
  32.     def init_ui
  34.         @color = Qt::Color.new 0, 0, 0
  36.         setGeometry 300, 300, 280, 170
  37.         setWindowTitle "ToggleButton"
  39.         @redb = Qt::PushButton.new 'Red', self
  40.         @redb.setCheckable true
  41.         @redb.move 10, 10
  43.         connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")
  45.         @greenb = Qt::PushButton.new 'Green', self
  46.         @greenb.setCheckable true
  47.         @greenb.move 10, 60
  49.         connect @greenb, SIGNAL('clicked()'), SLOT("on_clicked()")
  51.         @blueb = Qt::PushButton.new "Blue", self
  52.         @blueb.setCheckable true
  53.         @blueb.move 10, 110
  55.         connect @blueb, SIGNAL("clicked()"), SLOT("on_clicked()")
  56.         @square = Qt::Widget.new self
  57.         @square.setGeometry 150, 20, 100, 100
  58.         @square.setStyleSheet "QWidget { background-color: %s }" % @color.name
  59.     end
  61.     def on_clicked
  62.         red = @color.red
  63.         green = @color.green
  64.         blue = @color.blue
  66.         if @redb.isChecked
  67.             red = 255
  68.         else 
  69.             red = 0
  70.         end
  72.         if @greenb.isChecked
  73.             green = 255
  74.         else 
  75.             green = 0
  76.         end
  78.         if @blueb.isChecked
  79.             blue = 255
  80.         else 
  81.             blue = 0
  82.         end
  84.         @color = Qt::Color.new red, green, blue
  86.         @square.setStyleSheet("QWidget { background-color: %s }" % @color.name) 
  87.     end
  88. end
  90. app = Qt::Application.new ARGV
  91. QtApp.new
  92. app.exec

在代码示例中，我们使用三个切换按钮来更改矩形小部件的颜色。

  1. @redb = Qt::PushButton.new 'Red', self
  2. @redb.setCheckable true

我们创建一个Qt::PushButton小部件。 setCheckable方法将按钮更改为切换按钮。

  1. connect @redb, SIGNAL("clicked()"), SLOT("on_clicked()")

我们将按钮插入on_clicked方法调用中。

  1. @square = Qt::Widget.new self
  2. @square.setGeometry 150, 20, 100, 100
  3. @square.setStyleSheet "QWidget { background-color: %s }" % @color.name

我们创建一个方形小部件。 我们设置它的大小。 一开始是黑色的。 在 Qt 中，我们使用样式表来自定义小部件的外观。

在on_clicked方法内部，我们确定颜色值并将正方形小部件更新为新颜色。

  1. red = @color.red
  2. green = @color.green
  3. blue = @color.blue

在这里，我们确定方形小部件的当前颜色。

  1. if @redb.isChecked
  2.     red = 255
  3. else 
  4.     red = 0
  5. end

颜色的红色部分根据红色切换按钮的状态而改变。

  1. @color = Qt::Color.new red, green, blue

我们创建一个新的颜色值。

  1. @square.setStyleSheet("QWidget { background-color: %s }" % @color.name)

正方形的颜色已更新。

Ruby Qt 中的小部件 - 图4

图：开关按钮

Qt::ComboBox

Qt::ComboBox是一个小部件，允许用户从选项列表中进行选择。 这是一个显示当前项目的选择小部件，可以弹出可选择项目的列表。 组合框可能是可编辑的。 它以占用最少屏幕空间的方式向用户显示选项列表。

  1. #!/usr/bin/ruby
  3. # ZetCode Ruby Qt tutorial
  4. #
  5. # This program uses the Qt::ComboBox widget.
  6. # The option selected from the combo box is
  7. # displayed in the label widget.
  8. #
  9. # author: Jan Bodnar
  10. # website: www.zetcode.com
  11. # last modified: Sepetmber 2012
  13. require 'Qt'
  15. class QtApp < Qt::Widget
  17.     slots 'on_activated(QString)'
  19.     def initialize
  20.         super
  22.         setWindowTitle "Qt::ComboBox"
  24.         init_ui
  26.         resize 250, 150
  27.         move 300, 300
  29.         show
  30.     end
  32.     def init_ui
  34.         @label = Qt::Label.new "Ubuntu", self
  36.         combo = Qt::ComboBox.new self
  38.         combo.addItem "Ubuntu"
  39.         combo.addItem "Fedora"
  40.         combo.addItem "Mandriva"
  41.         combo.addItem "Red Hat"
  42.         combo.addItem "Mint"
  44.         connect combo, SIGNAL("activated(QString)"),
  45.             self, SLOT("on_activated(QString)")
  47.         combo.move 50, 30
  48.         @label.move 50, 100
  50.     end
  52.     def on_activated text
  53.         @label.setText text
  54.         @label.adjustSize
  55.     end
  57. end
  59. app = Qt::Application.new ARGV
  60. QtApp.new
  61. app.exec

在我们的代码示例中，我们有两个小部件：组合框和标签小部件。 从组合框中选择的选项显示在标签中。

  1. @label = Qt::Label.new "Ubuntu", self

这是一个标签，它将显示组合框中当前选择的选项。

  1. combo = Qt::ComboBox.new self

我们创建Qt::ComboBox小部件的实例。

  1. combo.addItem "Ubuntu"
  2. combo.addItem "Fedora"
  3. combo.addItem "Mandriva"
  4. combo.addItem "Red Hat"
  5. combo.addItem "Mint"

组合框将填充值。

  1. connect combo, SIGNAL("activated(QString)"),
  2.     self, SLOT("on_activated(QString)")

当我们从组合框中选择一个选项时，将触发on_activated方法。

  1. def on_activated text
  2.     @label.setText text
  3.     @label.adjustSize
  4. end

在on_activated方法中，我们将标签小部件更新为从组合框中选择的当前字符串。

Ruby Qt 中的小部件 - 图5

图：Qt::ComboBox小部件

在 Ruby Qt 教程的这一部分中，我们介绍了几个 Qt 小部件。