# 創建自定義小部件 > 原文： [http://zetcode.com/wxpython/customwidgets/](http://zetcode.com/wxpython/customwidgets/) 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滾動條，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 wxPython 有許多小部件； 客戶程序員創建了更多專門的小部件。 自定義窗口小部件有兩種創建方式：要么修改或增強現有窗口小部件，要么從頭開始創建自定義窗口小部件。 ## 超鏈接小部件 第一個示例將創建一個超鏈接。 超鏈接小部件將基于現有的`wx.lib.stattext.GenStaticText`小部件。 `hyperlink.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial This program creates a Hyperlink widget. author: Jan Bodnar website: zetcode.com last edited: May 2018 """ import wx from wx.lib.stattext import GenStaticText import webbrowser class Link(GenStaticText): def __init__(self, *args, **kw): super(Link, self).__init__(*args, **kw) self.font1 = wx.Font(11, wx.SWISS, wx.NORMAL, wx.BOLD, True, 'Verdana') self.font2 = wx.Font(11, wx.SWISS, wx.NORMAL, wx.BOLD, False, 'Verdana') self.SetFont(self.font2) self.SetForegroundColour('#0000ff') self.Bind(wx.EVT_MOUSE_EVENTS, self.OnMouseEvent) self.Bind(wx.EVT_MOTION, self.OnMouseEvent) def SetUrl(self, url): self.url = url def OnMouseEvent(self, e): if e.Moving(): self.SetCursor(wx.Cursor(wx.CURSOR_HAND)) self.SetFont(self.font1) elif e.LeftUp(): webbrowser.open_new(self.url) else: self.SetCursor(wx.NullCursor) self.SetFont(self.font2) e.Skip() class Example(wx.Frame): def __init__(self, *args, **kw): super(Example, self).__init__(*args, **kw) self.InitUI() def InitUI(self): panel = wx.Panel(self) vbox = wx.BoxSizer(wx.VERTICAL) hbox = wx.BoxSizer(wx.HORIZONTAL) st = GenStaticText(panel, label='Go to web site:') st.SetFont(wx.Font(11, wx.SWISS, wx.NORMAL, wx.BOLD, False, 'Verdana')) hbox.Add(st, flag=wx.LEFT, border=20) link_wid = Link(panel, label='ZetCode') link_wid.SetUrl('http://www.zetcode.com') hbox.Add(link_wid, flag=wx.LEFT, border=20) vbox.Add(hbox, flag=wx.TOP, border=30) panel.SetSizer(vbox) self.SetTitle('A Hyperlink') self.Centre() def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 此超鏈接窗口小部件基于現有的窗口小部件。 在此示例中，我們不繪制任何內容，僅使用現有的小部件，對其進行了一些修改。 ```py from wx.lib.stattext import GenStaticText import webbrowser ``` 在這里，我們導入基礎窗口小部件，從中可以導出我們的超鏈接窗口小部件和`webbrowser`模塊。 `webbrowser`模塊是標準的 Python 模塊。 我們將使用它在默認瀏覽器中打開鏈接。 ```py self.SetFont(self.font2) self.SetForegroundColour('#0000ff') ``` 創建超鏈接窗口小部件的想法很簡單。 我們從基礎`wx.lib.stattext.GenStaticText`小部件類繼承。 因此，我們有一個文本小部件。 然后我們對其進行一些修改。 我們更改字體和文本的顏色。 ```py if e.Moving(): self.SetCursor(wx.Cursor(wx.CURSOR_HAND)) self.SetFont(self.font1) ``` 如果將鼠標指針懸停在鏈接上，則會將字體更改為帶下劃線的字體，還將鼠標指針更改為手形光標。 ```py elif e.LeftUp(): webbrowser.open_new(self.url) ``` 如果我們左鍵單擊該鏈接，則會在默認瀏覽器中打開該鏈接。  圖：一個超鏈接小部件 ## 刻錄小部件 這是我們從頭開始創建的小部件的示例。 我們在窗口底部放置一個`wx.Panel`并手動繪制整個窗口小部件。 如果您曾經刻錄過 CD 或 DVD，那么您已經看到了這種小部件。 `burning.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial This program creates a Burning widget. author: Jan Bodnar website: zetcode.com last edited: May 2018 """ import wx class Burning(wx.Panel): def __init__(self, parent): wx.Panel.__init__(self, parent, size=(-1, 30), style=wx.SUNKEN_BORDER) self.parent = parent self.font = wx.Font(9, wx.FONTFAMILY_DEFAULT, wx.FONTSTYLE_NORMAL, wx.FONTWEIGHT_NORMAL, False, 'Courier 10 Pitch') self.Bind(wx.EVT_PAINT, self.OnPaint) self.Bind(wx.EVT_SIZE, self.OnSize) def OnPaint(self, e): num = range(75, 700, 75) dc = wx.PaintDC(self) dc.SetFont(self.font) w, h = self.GetSize() self.cw = self.parent.GetParent().cw step = int(round(w / 10.0)) j = 0 till = (w / 750.0) * self.cw full = (w / 750.0) * 700 if self.cw >= 700: dc.SetPen(wx.Pen('#FFFFB8')) dc.SetBrush(wx.Brush('#FFFFB8')) dc.DrawRectangle(0, 0, full, 30) dc.SetPen(wx.Pen('#ffafaf')) dc.SetBrush(wx.Brush('#ffafaf')) dc.DrawRectangle(full, 0, till-full, 30) else: dc.SetPen(wx.Pen('#FFFFB8')) dc.SetBrush(wx.Brush('#FFFFB8')) dc.DrawRectangle(0, 0, till, 30) dc.SetPen(wx.Pen('#5C5142')) for i in range(step, 10*step, step): dc.DrawLine(i, 0, i, 6) width, height = dc.GetTextExtent(str(num[j])) dc.DrawText(str(num[j]), i-width/2, 8) j = j + 1 def OnSize(self, e): self.Refresh() class Example(wx.Frame): def __init__(self, *args, **kwargs): super(Example, self).__init__(*args, **kwargs) self.InitUI() def InitUI(self): self.cw = 75 panel = wx.Panel(self) CenterPanel = wx.Panel(panel) self.sld = wx.Slider(CenterPanel, value=75, maxValue=750, size=(200, -1), style=wx.SL_LABELS) vbox = wx.BoxSizer(wx.VERTICAL) hbox = wx.BoxSizer(wx.HORIZONTAL) hbox2 = wx.BoxSizer(wx.HORIZONTAL) hbox3 = wx.BoxSizer(wx.HORIZONTAL) self.wid = Burning(panel) hbox.Add(self.wid, 1, wx.EXPAND) hbox2.Add(CenterPanel, 1, wx.EXPAND) hbox3.Add(self.sld, 0, wx.LEFT|wx.TOP, 35) CenterPanel.SetSizer(hbox3) vbox.Add(hbox2, 1, wx.EXPAND) vbox.Add(hbox, 0, wx.EXPAND) self.Bind(wx.EVT_SCROLL, self.OnScroll) panel.SetSizer(vbox) self.sld.SetFocus() self.SetTitle("Burning widget") self.Centre() def OnScroll(self, e): self.cw = self.sld.GetValue() self.wid.Refresh() def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 此小部件以圖形方式顯示了介質的總容量和可供我們使用的可用空間。 小部件由滑塊控制。 自定義窗口小部件的最小值為 0，最大值為 750。如果值達到 700，則開始繪制紅色。 這通常表示過度燃燒。 ```py w, h = self.GetSize() self.cw = self.parent.GetParent().cw ... till = (w / 750.0) * self.cw full = (w / 750.0) * 700 ``` 我們動態繪制小部件。 窗口越大，刻錄小部件越大。 反之亦然。 這就是為什么我們必須計算在其上繪制自定義窗口小部件的`wx.Panel`的大小。 `till`參數確定要繪制的總大小。 該值來自滑塊小部件。 它占整個面積的一部分。 `full`參數確定了我們開始繪制紅色的點。 注意使用浮點算法。 這是為了達到更高的精度。 實際圖紙包括三個步驟。 我們繪制黃色或紅色和黃色矩形。 然后，我們繪制垂直線，這些垂直線將小部件分為幾個部分。 最后，我們畫出數字來表示介質的容量。 ```py def OnSize(self, e): self.Refresh() ``` 每次調整窗口大小時，我們都會刷新小部件。 這將導致小部件重新繪制自身。 ```py def OnScroll(self, e): self.cw = self.sld.GetValue() self.wid.Refresh() ``` 如果滾動滑塊的拇指，我們將獲得實際值并將其保存到`self.cw`參數中。 繪制刻錄窗口小部件時使用此值。 然后，我們使小部件重新繪制。  圖：刻錄小部件 ## CPU 小部件 有一些系統應用可以測量系統資源，例如溫度，內存或 CPU 消耗。 創建專用的小部件以使應用更具吸引力。 以下窗口小部件通常在系統應用中使用。 `cpu.py` ```py #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ ZetCode wxPython tutorial This program creates a CPU widget. author: Jan Bodnar website: zetcode.com last edited: May 2018 """ import wx class CPU(wx.Panel): def __init__(self, parent): wx.Panel.__init__(self, parent, size=(80, 110)) self.parent = parent self.SetBackgroundColour('#000000') self.Bind(wx.EVT_PAINT, self.OnPaint) def OnPaint(self, e): dc = wx.PaintDC(self) dc.SetDeviceOrigin(0, 100) dc.SetAxisOrientation(True, True) pos = self.parent.GetParent().GetParent().sel rect = pos / 5 for i in range(1, 21): if i > rect: dc.SetBrush(wx.Brush('#075100')) dc.DrawRectangle(10, i*4, 30, 5) dc.DrawRectangle(41, i*4, 30, 5) else: dc.SetBrush(wx.Brush('#36ff27')) dc.DrawRectangle(10, i*4, 30, 5) dc.DrawRectangle(41, i*4, 30, 5) class Example(wx.Frame): def __init__(self, *args, **kwargs): super(Example, self).__init__(*args, **kwargs) self.InitUI() def InitUI(self): self.sel = 0 panel = wx.Panel(self) centerPanel = wx.Panel(panel) self.cpu = CPU(centerPanel) hbox = wx.BoxSizer(wx.HORIZONTAL) self.slider = wx.Slider(panel, value=self.sel, maxValue=100, size=(-1, 100), style=wx.VERTICAL | wx.SL_INVERSE) self.slider.SetFocus() hbox.Add(centerPanel, 0, wx.LEFT | wx.TOP, 20) hbox.Add(self.slider, 0, wx.LEFT | wx.TOP, 30) self.Bind(wx.EVT_SCROLL, self.OnScroll) panel.SetSizer(hbox) self.SetTitle("CPU") self.Centre() def OnScroll(self, e): self.sel = e.GetInt() self.cpu.Refresh() def main(): app = wx.App() ex = Example(None) ex.Show() app.MainLoop() if __name__ == '__main__': main() ``` 我們創建一個黑色面板。 然后，我們在此面板上繪制小矩形。 矩形的顏色取決于滑塊的值。 顏色可以是深綠色或亮綠色。 ```py dc.SetDeviceOrigin(0, 100) dc.SetAxisOrientation(True, True) ``` 在這里，我們將默認坐標系更改為笛卡爾坐標。 這是為了使圖形直觀。 ```py pos = self.parent.GetParent().GetParent().sel rect = pos / 5 ``` 在這里，我們獲得了大小調整器的值。 每列有 20 個矩形。 滑塊有 100 個數字。 `rect`參數將滑塊值轉換為以鮮綠色繪制的矩形。 ```py for i in range(1, 21): if i > rect: dc.SetBrush(wx.Brush('#075100')) dc.DrawRectangle(10, i*4, 30, 5) dc.DrawRectangle(41, i*4, 30, 5) else: dc.SetBrush(wx.Brush('#36ff27')) dc.DrawRectangle(10, i*4, 30, 5) dc.DrawRectangle(41, i*4, 30, 5) ``` 這里我們繪制 40 個矩形，每列 20 個。 如果要繪制的矩形的數目大于轉換后的`rect`值，則將其繪制為深綠色；否則，將其繪制為深綠色。 否則為亮綠色。  圖：`CPU`小部件 在本章中，我們在 wxPython 中創建了自定義窗口小部件。