Archive:Development/Tutorials/Qt4 Ruby Tutorial/Chapter 08 (zh TW)

Preparing for Battle

檔案：

• lcdrange.rb
• t8.rb
• cannon.rb

概覽

在這個範例中，我們介紹第一個可以描繪本身的自定 widget。我們還增加一個有用的鍵盤介面（用兩行程式碼）。

一行一行的瀏覽

lcdrange.rb

這個檔案非常類似第7章的 lcdrange.rb。但我們新增了一個槽：setRange()。

我們現在加入設定 LCDRange 範圍的可能性。到目前為止，它都被固定在0到99之間。

def setRange(minVal, maxVal)
  if minVal < 0 || maxVal > 99 || minVal > maxVal
    qWarning("LCDRange::setRange(#{minVal}, #{maxVal})\n" +
               "\tRange must be 0..99\n" +
               "\tand minVal must not be greater than maxVal")
    return
  end

  @slider.setRange(minVal, maxVal)
end

setRange() 槽設定了 LCDRange 中 slider 的範圍。因為我們已經設立了 QLCDNumber 是顯示兩位數。所以我們希望盡可能限制 minVal 和 maxVal 的範圍，避免QLCDNumber 的溢位。（我們也可以允許值下限至-9，但我們沒有選擇這麼做。）如果參數是非法的，我們使用 Qt 的 QtGlobal::qWarning() 函式對使用者發出警告並立即返回。QtGlobal::qWarning() 是一個類似 printf 的函式，預設情況下它會輸出至 $stderr。如果您願意，您可以使用 QtGlobal::qInstallMsgHandler() 安裝自己的處理函式。

lcd.setSegmentStyle(Qt::LCDNumber::Filled)

這使得我們的 lcd 數字顯示方式更好。我不敢肯定，但我相信做到這一點是因為設定一個調色板（請見下一節）。我所知道的是，我在前面的章節嘗試時，這條線不會生效，但在這裡可以運作。

cannon.rb

@currentAngle = 45
setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
setAutoFillBackground(true)

建構子初始化角度為45度，並為這個 widget 設定一個自定調色板（palette）。

這個調色板使用指定的顏色作為背景，並挑選其他適當的顏色。（對這個　widget　而言，只有背景和文字顏色會真正用到。）然後，我們呼叫　setAutoFillBackground(true)　告訴　Qt　自動填充背景。

Qt::Color 用來指定一組 RGB（紅－綠－藍），每個值介於0（暗）和255（亮）之間。我們也可以使用一個預先定義的顏色，例如 Qt::yellow，來代替指定RGB值。

def setAngle(angle)
  if angle < 5
    angle = 5
  elsif angle > 70
    angle = 70
  end

  if @currentAngle == angle
    return
  end

  @currentAngle = angle
  update()
  emit angleChanged(@currentAngle)
end  def setAngle(degrees)

這個函式設定角度值。我們選擇了5到70的合法範圍，並依此調整給予的角度數值。如果新的角度超出範圍，我們選擇了不發出警告。

如果新的角度和舊的相等，我們立即返回。重要的是，只有當角度真的發生變化，才發出angleChanged() 訊號。

然後我們設定新的角度值，並重繪我們的 widget。Qt::Widget::update() 函式會清空這個 widget（通常用它的背景顏色填滿），並發送一個繪圖（paint）事件給這個 widget。結果就是呼叫了這個 widget 的繪圖事件函式。

最後，我們發出 angleChanged() 訊號來告訴外界角度改變了。emit 關鍵字是 Qt 特有的，並不是標準的 Ruby 語法。

def paintEvent(event)
  painter = Qt::Painter.new(self)
  painter.drawText(200, 200, tr("Angle = #{@currentAngle}"))
  painter.end()
end

這是我們第一次嘗試寫繪圖事件處理器。事件參數包含了繪圖事件的描述。Qt::PaintEvent 包含 widget 中必須更新的區域。暫時，讓我們懶惰的直接畫出所有東西。

我們的程式碼會在 Widget 中一個固定的位置顯示角度值。我們建立了一個在這個 widget 運作的 Qt::Painter，並用它畫出字串。我們之後會再回到 Qt::Painter，它可以做很多事情。

t8.rb

angle = LCDRange.new()
angle.setRange(5, 70)

在建構子中，我們建立並設定 LCDRange widget。 我們設定 LCDRange 接受5到70度的角度。

 cannonField = CannonField.new()

我們建立了 CannonField widget。

connect(angle, SIGNAL('valueChanged(int)'),
        cannonField, SLOT('setAngle(int)'))
connect(cannonField, SIGNAL('angleChanged(int)'),
        angle, SLOT('setValue(int)'))

在這裡，我們連接 LCDRange 的 valueChanged() 訊號到 CannonField 的 setValue() 槽。每當使用者操作 LCDRange 時，這將更新 CannonField 的角度值。我們也做出反向連接，以便 CannonField 改變角度，也會更新 LCDRange 的數值。在我們的例子中，我們不會直接改變 CannonField 的角度。但藉由最後的 connect()，我們可以確保沒有改變會破壞這兩個值之間的同步。

這說明了組件程式設計和適當封裝的威力。

請注意，只有在角度實際改變時，發出 angleChanged() 訊號是多麼重要。如果 LCDRange 和 CannonField 同時省略了這個檢查，在第一次改變其中一個值後，這支程式將進入一個無限循環。

gridLayout = Qt::GridLayout.new()

到目前為止，我們都是使用 Qt::VBoxLayout 作為幾何管理。但現在，我們希望有更多一點的佈局控制，所以我們切換到更強大的 Qt::GridLayout 類別。Qt::GridLayout 不是一個 widget。它是另一個可以管理任何子 widget 的類別。

我們不需要在 Qt::GridLayout 的建構子裡指定任何尺寸。Qt::GridLayout 會根據我們放入的網格決定列和行的數目。

上圖展示了我們試著去實現的佈局。左邊展示的是佈局示意圖，右邊是一個程式的實際截圖。（這兩張圖的版權為諾基亞所有。）

    gridLayout.addWidget(quit, 0, 0)

我們在網格的左上角，即坐標（0，0），加入 Quit 按鈕。

    gridLayout.addWidget(angle, 1, 0)

我們把角度 LCDRange 放在（1，0）。 We put the angle LCDRange cell (1, 0).

gridLayout.addWidget(cannonField, 1, 1, 2, 1)

我們讓 CannonField 物件佔據（1，1）和（2，1）。

    gridLayout.setColumnStretch(1, 10)

我們告訴 Qt::GridLayout 右邊的行（行1）伸展係數（stretch factor）為10，是可伸展的。由於左行不是（它的伸展係數為0，即預設值），Qt::GridLayout 會盡量讓左邊的 widgets 的大小不變。並在 MyWidget 大小改變時，只改變 CannonField 的大小。

在這個特殊的例子中，第1行用任何大於0的伸展係數都有同樣的效果。在更複雜的佈局中，您可以分配適當的伸展係數告訴一個特定的行或列比另一個的伸展快兩倍。

    angle.setValue(60)

我們設定一個初始角度值。請注意，這將觸發從 LCDRange 到 CannonField 的連接 。

    angle.setFocus()

我們最後的動作是設定 angle 取得鍵盤焦點（focus），使鍵盤輸入預設將傳到 LCDRange widget。

執行應用程式

當 slider 操作時，CannonField 會顯示新的角度值。若是調整大小，CannonField 會盡可能得到多的空間。

練習

嘗試調整視窗的大小。如果你使它變得非常窄或非常矮，會發生什麼事？

如果你給左邊行一個非零的伸展係數。當視窗大小改變時，會發生什麼事？

試著修改「Quit」為「&Quit」。 按鈕的外觀有什麼改變呢？（是否改變跟平台有關。）如果你在程式執行時，按下 Alt+Q，會發生什麼事？

把 CannonField 的文字置中。