自定義小部件 · ZetCode 中文系列教程

# 自定義小部件 > 原文： [http://zetcode.com/gui/vbgtk/customwidget/](http://zetcode.com/gui/vbgtk/customwidget/) 您是否曾經看過某個應用，并想知道如何創建特定的 GUI 項目？可能每個想成為程序員的人都有。然后，您正在查看您最喜歡的 gui 庫提供的小部件列表。但是你找不到。工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。實際上有兩種工具箱。 Spartan 工具包和重量級工具包。 FLTK 工具包是一種 spartan 工具包。它僅提供了非常基本的小部件，并假定程序員將自己創建更復雜的小部件。 wxWidgets 是重量級的。它有很多小部件。但是，它不提供更專業的小部件。例如，速度表小部件，即測量要刻錄 CD 容量的小部件（例如，在 nero 中找到）。工具箱通常也沒有圖表。程序員必須自己創建此類小部件。他們使用工具箱提供的繪圖工具來完成此任務。有兩種可能性。程序員可以修改或增強現有的小部件。或者，他可以從頭開始創建自定義窗口小部件。 ## 刻錄小部件這是我們從頭開始創建的小部件的示例。可以在各種媒體刻錄應用（例如 Nero 刻錄 ROM）中找到此小部件。 `custom.vb` ```vb Imports Gtk NameSpace BurningWidget Public Class Burning Inherits DrawingArea Const PANEL_HEIGHT As Integer = 30 Const DIVISIONS As Integer = 10 Const FULL_CAPACITY As Double = 700 Const MAX_CAPACITY As Double = 750 Dim redColor As New Gdk.Color(1, 0.7, 0.7) Dim yellowColor As New Gdk.Color(1, 1, 0.7) Dim parent As Widget Dim num() As String = { _ "75", "150", "225", "300", _ "375", "450", "525", "600", _ "675" _ } Public Sub New(ByVal parent As Widget) Me.SetSizeRequest(1, PANEL_HEIGHT) Me.parent = parent AddHandler Me.ExposeEvent, AddressOf Me.OnExpose End Sub Private Sub OnExpose(ByVal sender As Object, ByVal e As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawCustomWidget(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose End Sub Private Sub DrawCustomWidget(ByVal cc As Cairo.Context) cc.LineWidth = 0.8 cc.SelectFontFace("Courier 10 Pitch", _ Cairo.FontSlant.Normal, Cairo.FontWeight.Normal) cc.SetFontSize(11) Dim burn As Custom.GtkVBApp = CType(parent, Custom.GtkVBApp) Dim slid_width As Double = burn.GetCurrentWidth Dim width As Double = Allocation.Width Dim move As Double = width / DIVISIONS Dim till As Double = (width / MAX_CAPACITY) * slid_width Dim full As Double = (width / MAX_CAPACITY) * FULL_CAPACITY If slid_width >= FULL_CAPACITY cc.SetSourceRGB(1.0, 1.0, 0.72) cc.Rectangle(0, 0, full, PANEL_HEIGHT) cc.Clip cc.Paint cc.ResetClip cc.SetSourceRGB(1.0, 0.68, 0.68) cc.Rectangle(full, 0, till-full, PANEL_HEIGHT) cc.Clip cc.Paint cc.ResetClip Else cc.SetSourceRGB(1.0, 1.0, 0.72) cc.Rectangle(0, 0, till, PANEL_HEIGHT) cc.Clip cc.Paint cc.ResetClip End If cc.SetSourceRGB(0.35, 0.31, 0.24) For i As Integer = 1 To num.Length cc.MoveTo(i*move, 0) cc.LineTo(i*move, 5) cc.Stroke Dim extents As Cairo.TextExtents = cc.TextExtents(num(i-1)) cc.MoveTo(i*move-extents.Width/2, 15) cc.TextPath(num(i-1)) cc.Stroke Next End Sub End Class End Namespace ``` 我們在窗口底部放置一個`DrawingArea`并手動繪制整個窗口小部件。所有重要的代碼都駐留在`DrawCustomWidget`中，這是從 Burning 類的`OnExpose`方法調用的。此小部件以圖形方式顯示了介質的總容量和可供我們使用的可用空間。該小部件由比例小部件控制。自定義窗口小部件的最小值為 0，最大值為 750。如果值達到 700，則開始繪制紅色。這通常表示過度燃燒。 ```vb Dim num() As String = { _ "75", "150", "225", "300", _ "375", "450", "525", "600", _ "675" _ } ``` 這些數字顯示在刻錄小部件上。它們顯示了介質的容量。 ```vb Dim burn As Custom.GtkVBApp = CType(parent, Custom.GtkVBApp) Dim slid_width As Double = burn.GetCurrentWidth ``` 這兩行從 scale 小部件獲取當前數字。我們獲得父窗口小部件，并從父窗口小部件中獲得當前值。 ```vb Dim till As Double = (width / MAX_CAPACITY) * slid_width Dim full As Double = (width / MAX_CAPACITY) * FULL_CAPACITY ``` 我們使用`width`變量進行轉換。在比例尺值和自定義小部件的度量之間。請注意，我們使用浮點值。我們在繪圖中獲得了更高的精度。 `till`參數確定要繪制的總大小。該值來自滑塊小部件。它占整個面積的一部分。 `full`參數確定了我們開始繪制紅色的點。 ```vb cc.SetSourceRGB(1.0, 1.0, 0.72) cc.Rectangle(0, 0, till, PANEL_HEIGHT) cc.Clip cc.Paint cc.ResetClip ``` 此代碼在此處繪制了一個黃色矩形，直到介質充滿為止。 ```vb Dim extents As Cairo.TextExtents = cc.TextExtents(num(i-1)) cc.MoveTo(i*move-extents.Width/2, 15) cc.TextPath(num(i-1)) cc.Stroke ``` 這里的代碼在刻錄小部件上繪制數字。我們計算`TextExtents`來正確定位文本。 `burning.vb` ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' In this program, we create ' a custom widget ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk NameSpace Custom Public Class GtkVBApp Inherits Window Const MAX_CAPACITY As Integer = 750 Dim cur_value As Integer Dim burning As BurningWidget.Burning Public Sub New MyBase.New("Burning") Me.InitUI Me.SetDefaultSize(350, 200) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim vbox As New VBox(False, 2) Dim scale As New HScale(0, MAX_CAPACITY, 1) scale.SetSizeRequest(160, 35) AddHandler scale.ValueChanged, AddressOf Me.OnChanged Dim fixed As New Fixed fixed.Put(scale, 50, 50) vbox.PackStart(fixed) burning = New BurningWidget.Burning(Me) vbox.PackStart(burning, False, False, 0) Me.Add(vbox) End Sub Private Sub OnChanged(ByVal sender As Object, ByVal args As EventArgs) cur_value = sender.Value burning.QueueDraw End Sub Public Function GetCurrentWidth As Integer Return cur_value End Function Sub OnDelete(ByVal sender As Object, ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class End Namespace ``` 這是主要的類。 ```vb Private Sub OnChanged(ByVal sender As Object, ByVal args As EventArgs) cur_value = sender.Value burning.QueueDraw End Sub ``` 我們從小部件中獲取值，并將其存儲在`cur_value`變量中以備后用。我們重新繪制刻錄的小部件。 ![Burning widget](https://img.kancloud.cn/c7/85/c785a2ad25eee45eb63b22449b683255_358x228.jpg) 圖：刻錄小部件在本章中，我們使用 GTK# 和 Visual Basic 創建了一個自定義窗口小部件。