# Ruby Qt 中的自定義小部件 > 原文： [http://zetcode.com/gui/rubyqt/customwidget/](http://zetcode.com/gui/rubyqt/customwidget/) 在 Ruby Qt 編程教程的這一部分中，我們將創建一個自定義窗口小部件。 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 程序員必須自己創建此類小部件。 他們使用工具箱提供的繪圖工具來完成此任務。 有兩種可能性。 程序員可以修改或增強現有的小部件。 或者，他可以從頭開始創建自定義窗口小部件。 ## 刻錄小部件 在下一個示例中，我們將創建一個自定義刻錄小部件。 可以在 Nero 或 K3B 之類的應用中看到此小部件。 該小部件將從頭開始創建。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # In this program, we create # a custom widget # # @author jan bodnar # website zetcode.com # last modified July 2009 require 'Qt' PANEL_HEIGHT = 30 DISTANCE = 19 LINE_WIDTH = 5 DIVISIONS = 10 FULL_CAPACITY = 700 MAX_CAPACITY = 750 class Burning < Qt::Widget def initialize(parent) super(parent) @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ] @redColor = Qt::Color.new 255, 175, 175 @yellowColor = Qt::Color.new 255, 255, 184 @parent = parent setMinimumHeight PANEL_HEIGHT end def paintEvent event painter = Qt::Painter.new self drawWidget painter painter.end end def drawWidget painter w = width.to_f slid_width = @parent.getCurrentWidth step = (w / DIVISIONS).round.to_f till = ((w / MAX_CAPACITY) * slid_width).to_f full = ((w / MAX_CAPACITY) * FULL_CAPACITY).to_f if slid_width > FULL_CAPACITY painter.setPen @yellowColor painter.setBrush Qt::Brush.new @yellowColor painter.drawRect Qt::RectF.new 0, 0, full, PANEL_HEIGHT painter.setPen @redColor painter.setBrush Qt::Brush.new @redColor painter.drawRect Qt::RectF.new full+1, 0, till-full, PANEL_HEIGHT else if slid_width > 0 painter.setPen @yellowColor painter.setBrush Qt::Brush.new @yellowColor painter.drawRect Qt::RectF.new 0, 0, till, PANEL_HEIGHT end end painter.setPen Qt::Color.new 90, 90, 90 painter.setBrush Qt::NoBrush painter.drawRect 0, 0, w-1, PANEL_HEIGHT-1 newFont = font newFont.setPointSize 7 painter.setFont newFont for i in (1..@num.length) painter.drawLine Qt::LineF.new i*step, 1, i*step, LINE_WIDTH metrics = Qt::FontMetrics.new newFont w = metrics.width @num[i-1] painter.drawText(Qt::PointF.new(i*step-w/2, DISTANCE), @num[i-1]) end end end class QtApp < Qt::Widget slots 'onChanged(int)' def initialize super setWindowTitle "The Burning Widget" initUI resize 370, 200 move 300, 300 show end def initUI @cur_width = 0 @slider = Qt::Slider.new Qt::Horizontal , self @slider.setMaximum MAX_CAPACITY @slider.setGeometry 50, 50, 130, 30 connect(@slider, SIGNAL("valueChanged(int)"), self, SLOT("onChanged(int)")) vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new vbox.addStretch 1 @widget = Burning.new self hbox.addWidget @widget, 0 vbox.addLayout hbox setLayout vbox end def onChanged val @cur_width = val @widget.repaint end def getCurrentWidth return @cur_width end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在這個文件中，我們創建了刻錄小部件。 ```rb class Burning < Qt::Widget ``` 自定義窗口小部件基于`Widget`小部件。 ```rb PANEL_HEIGHT = 30 DISTANCE = 19 LINE_WIDTH = 5 DIVISIONS = 10 FULL_CAPACITY = 700 MAX_CAPACITY = 750 ``` 這些是重要的常數。 `PANEL_HEIGHT`定義自定義窗口小部件的高度。 `DISTANCE`是比例尺上的數字與其父邊框頂部之間的距離。 `LINE_WIDTH`是垂直線的寬度。 `DIVISIONS`是秤的數量。 `FULL_CAPACITY`是媒體的最大容量。 達到目標后，就會發生過度刻錄。 這通過紅色可視化。 `MAX_CAPACITY`是介質的最大容量。 ```rb @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ] ``` 我們使用這些數字來構建`Burning`小部件的比例。 ```rb def paintEvent event painter = Qt::Painter.new self drawWidget painter painter.end end ``` 自定義窗口小部件的圖形委托給`drawWidget`方法。 ```rb slid_width = @parent.getCurrentWidth ``` 我們使用它來獲取當前選定的滑塊值。 ```rb w = width.to_f ``` 我們得到小部件的寬度。 自定義窗口小部件的寬度是動態的。 用戶可以調整大小。 ```rb till = ((w / MAX_CAPACITY) * slid_width).to_f full = ((w / MAX_CAPACITY) * FULL_CAPACITY).to_f ``` 我們使用`w`變量進行轉換。 在比例尺值和自定義小部件的度量之間。 請注意，我們使用浮點值。 我們在繪圖中獲得了更高的精度。 ```rb painter.setPen @redColor painter.setBrush Qt::Brush.new @redColor painter.drawRect Qt::RectF.new full+1, 0, till-full, PANEL_HEIGHT ``` 這三行畫出紅色矩形，表示過度燃燒。 ```rb painter.drawRect 0, 0, w-1, PANEL_HEIGHT-1 ``` 這是小部件的外圍，即外部矩形。 ```rb painter.drawLine Qt::LineF.new i*step, 1, i*step, LINE_WIDTH ``` 在這里，我們畫出小的垂直線。 ```rb w = metrics.width @num[i-1] painter.drawText(Qt::PointF.new(i*step-w/2, DISTANCE), @num[i-1]) ``` 在這里，我們繪制刻度的數字。 為了精確定位數字，我們必須獲得字符串的寬度。 ```rb @widget = Burning.new self hbox.addWidget @widget, 0 ``` 我們創建`Burning`小部件的實例并將其添加到水平框中。 ```rb def onChanged val @cur_width = val @widget.repaint end ``` 當滑塊的值更改時，我們將其存儲在`@cur_width`變量中，然后重新繪制自定義窗口小部件。 ```rb def getCurrentWidth return @cur_width end ``` 定制小部件調用此方法以獲取實際的滑塊值。  圖：刻錄小部件 在 Ruby Qt 教程的這一部分中，我們已經演示了如何創建自定義窗口小部件。