Archive:Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06 (zh CN): Difference between revisions

From KDE TechBase
(Created page with '{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06}} {{TutorialBrowser_(zh_TW)| series=[[Development/Tutorials/Qt4_Ruby_Tutorial...')
 
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06}}
{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 06}}


{{TutorialBrowser_(zh_TW)|
{{TutorialBrowser_(zh_CN)|


series=[[Development/Tutorials/Qt4_Ruby_Tutorial_(zh_CN)|Qt4 Ruby 教学]]|
series=[[Development/Tutorials/Qt4_Ruby_Tutorial_(zh_CN)|Qt4 Ruby 教学]]|
Line 19: Line 19:
这个范例展示如何封装两个 widget 为一个新的组件,以及使用在多量 widget 时是多么容易。这是第一次,我们使用自定义的 widget 作为子 widget。
这个范例展示如何封装两个 widget 为一个新的组件,以及使用在多量 widget 时是多么容易。这是第一次,我们使用自定义的 widget 作为子 widget。


<code ruby>
<syntaxhighlight lang="ruby">
require 'Qt4'
require 'Qt4'


Line 66: Line 66:
widget = MyWidget.new()
widget = MyWidget.new()
widget.show()
widget.show()
</code>
</syntaxhighlight>


===一行一行的浏览===
===一行一行的浏览===
<code ruby>
<syntaxhighlight lang="ruby">
class LCDRange < Qt::Widget
class LCDRange < Qt::Widget
</code>
</syntaxhighlight>


'''<tt>LCDRange</tt>''' widget 是一个没有任何 API 的 widget。它只有一个建构子。这种 widget 并不是非常有用,所以稍后我们将会加入一些 API。
'''<tt>LCDRange</tt>''' widget 是一个没有任何 API 的 widget。它只有一个建构子。这种 widget 并不是非常有用,所以稍后我们将会加入一些 API。


<code ruby>
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
def initialize(parent = nil)
   super()
   super()
Line 90: Line 90:
   setLayout(layout)
   setLayout(layout)
end
end
</code>
</syntaxhighlight>


这是直接抄袭第5章的 '''<tt>MyWidget</tt>''' 建构子。唯一的差别是,拿掉了 <strong>Quit</strong> 按钮和重新命名这个类别。
这是直接抄袭第5章的 '''<tt>MyWidget</tt>''' 建构子。唯一的差别是,拿掉了 <strong>Quit</strong> 按钮和重新命名这个类别。


<code ruby>
<syntaxhighlight lang="ruby">
class MyWidget < Qt::Widget
class MyWidget < Qt::Widget
</code>
</syntaxhighlight>


'''<tt>MyWidget</tt>''' 同样除了一个建构子外,没有其他 API。
'''<tt>MyWidget</tt>''' 同样除了一个建构子外,没有其他 API。


<code ruby>
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
def initialize(parent = nil)
   super()
   super()
Line 106: Line 106:
   quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
   quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
   connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
   connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))
</code>
</syntaxhighlight>


这个过去在改名为 '''<tt>LCDRange</tt>''' 类别里的按钮,被分离出来。这样我们能有一个 <strong>Quit</strong> 按钮,和许多 '''<tt>LCDRange</tt>''' 对象。
这个过去在改名为 '''<tt>LCDRange</tt>''' 类别里的按钮,被分离出来。这样我们能有一个 <strong>Quit</strong> 按钮,和许多 '''<tt>LCDRange</tt>''' 对象。


<code ruby>
<syntaxhighlight lang="ruby">
     grid = Qt::GridLayout.new()
     grid = Qt::GridLayout.new()
</code>
</syntaxhighlight>


我们在 [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] 中建立一个包含三行(column)的 [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout]。
我们在 [http://doc.qt.nokia.com/latest/qwidget.html Qt::Widget] 中建立一个包含三行(column)的 [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout]。
Line 118: Line 118:
[http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] 会自动排列在其中 widget 的行和列。在 widget 加入布局时, 您可以指定行和列的数字,[http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] 会填入他们到网格(grid)中。
[http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] 会自动排列在其中 widget 的行和列。在 widget 加入布局时, 您可以指定行和列的数字,[http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] 会填入他们到网格(grid)中。


<code ruby>
<syntaxhighlight lang="ruby">
for row in 0..2
for row in 0..2
   for column in 0..2
   for column in 0..2
Line 124: Line 124:
   end
   end
end
end
</code>
</syntaxhighlight>


所有我们建立的9个 '''<tt>LCDRange</tt>''' widget,它们都是网格物件的子 widget。我们排列他们成3列3行。
所有我们建立的9个 '''<tt>LCDRange</tt>''' widget,它们都是网格物件的子 widget。我们排列他们成3列3行。
Line 133: Line 133:
===练习===
===练习===
在启动时,初始化每一个 slider 为不同/随机值。
在启动时,初始化每一个 slider 为不同/随机值。
[[Category:Ruby]]

Latest revision as of 15:43, 23 June 2013

Template:I18n/Language Navigation Bar (zh CN)

Template:TutorialBrowser (zh CN)

Building Blocks Galore!

档案:

概览

这个范例展示如何封装两个 widget 为一个新的组件,以及使用在多量 widget 时是多么容易。这是第一次,我们使用自定义的 widget 作为子 widget。

require 'Qt4'

class LCDRange < Qt::Widget
  def initialize(parent = nil)
    super()
    lcd = Qt::LCDNumber.new(2)

    slider = Qt::Slider.new(Qt::Horizontal)
    slider.setRange(0, 99)
    slider.setValue(0)

    connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))

    layout = Qt::VBoxLayout.new()
    layout.addWidget(lcd)
    layout.addWidget(slider)
    setLayout(layout)
  end
end

class MyWidget < Qt::Widget
  def initialize(parent = nil)
    super()
    quit = Qt::PushButton.new(tr('Quit'))
    quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
    connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))

    grid = Qt::GridLayout.new()
    
    for row in 0..2
      for column in 0..2
        grid.addWidget(LCDRange.new(), row, column)
      end
    end

    layout = Qt::VBoxLayout.new()
    layout.addWidget(quit)
    layout.addLayout(grid)
    setLayout(layout)
  end
end    

app = Qt::Application.new(ARGV)

widget = MyWidget.new()
widget.show()

一行一行的浏览

class LCDRange < Qt::Widget

LCDRange widget 是一个没有任何 API 的 widget。它只有一个建构子。这种 widget 并不是非常有用,所以稍后我们将会加入一些 API。

def initialize(parent = nil)
  super()
  lcd = Qt::LCDNumber.new(2)
  slider = Qt::Slider.new(Qt::Horizontal)
  slider.setRange(0, 99)
  slider.setValue(0)

  connect(slider, SIGNAL('valueChanged(int)'), lcd, SLOT('display(int)'))

  layout = Qt::VBoxLayout.new()
  layout.addWidget(lcd)
  layout.addWidget(slider)
  setLayout(layout)
end

这是直接抄袭第5章的 MyWidget 建构子。唯一的差别是,拿掉了 Quit 按钮和重新命名这个类别。

class MyWidget < Qt::Widget

MyWidget 同样除了一个建构子外,没有其他 API。

def initialize(parent = nil)
  super()
  quit = Qt::PushButton.new(tr('Quit'))
  quit.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))
  connect(quit, SIGNAL('clicked()'), $qApp, SLOT('quit()'))

这个过去在改名为 LCDRange 类别里的按钮,被分离出来。这样我们能有一个 Quit 按钮,和许多 LCDRange 对象。

    grid = Qt::GridLayout.new()

我们在 Qt::Widget 中建立一个包含三行(column)的 Qt::GridLayout

Qt::GridLayout 会自动排列在其中 widget 的行和列。在 widget 加入布局时, 您可以指定行和列的数字,Qt::GridLayout 会填入他们到网格(grid)中。

for row in 0..2
  for column in 0..2
    grid.addWidget(LCDRange.new(), row, column)
  end
end

所有我们建立的9个 LCDRange widget,它们都是网格物件的子 widget。我们排列他们成3列3行。

执行应用程序

这支程序展示如何能够非常容易地一次使用许多 widget。每个 widget 的行为都像是前一章的 slider 和 LCD number。同样的,不同之处在于实现。

练习

在启动时,初始化每一个 slider 为不同/随机值。