创建自定义小部件
最后修改于 2023 年 1 月 10 日
工具包通常只提供最常见的小部件，如按钮、文本小部件、滚动条、滑块等。没有一个工具包可以提供所有可能的小部件。wxPython 有许多小部件；更专业的小部件由客户端程序员创建。
自定义小部件的创建方式有两种：要么修改或增强现有的小部件，要么从头开始创建自定义小部件。
超链接小部件
第一个例子将创建一个超链接。超链接小部件将基于现有的 wx.lib.stattext.GenStaticText 小部件。
hyperlink.py
#!/usr/bin/env python
"""
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()
这个超链接小部件基于一个现有的小部件。在这个例子中，我们什么都不画，我们只是使用一个现有的小部件，稍微修改一下。
from wx.lib.stattext import GenStaticText import webbrowser
在这里，我们从我们派生超链接小部件的基类小部件以及 webbrowser 模块导入。webbrowser 模块是一个标准的 Python 模块。我们将使用它在默认浏览器中打开链接。
self.SetFont(self.font2)
self.SetForegroundColour('#0000ff')
创建超链接小部件的想法很简单。我们从基类 wx.lib.stattext.GenStaticText 小部件类继承。所以我们有一个文本小部件。然后我们稍微修改一下。我们更改字体和文本颜色。
if e.Moving():
self.SetCursor(wx.Cursor(wx.CURSOR_HAND))
self.SetFont(self.font1)
如果我们将鼠标指针悬停在链接上，我们将字体更改为下划线，并将鼠标指针更改为手形光标。
elif e.LeftUp():
webbrowser.open_new(self.url)
如果我们左键单击链接，我们会在默认浏览器中打开该链接。
刻录部件
这是一个我们从头开始创建的小部件的例子。我们在窗口底部放置一个 wx.Panel，并手动绘制整个小部件。如果你曾经烧录过 CD 或 DVD，你已经看到了这种类型的小部件。
burning.py
#!/usr/bin/env python
"""
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 的值，我们就开始用红色绘制。这通常表示超刻录。
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 参数确定我们开始用红色绘制的点。注意浮点运算的使用。这是为了实现更高的精度。
实际的绘制包括三个步骤。我们绘制黄色或红色和黄色的矩形。然后我们绘制垂直线，将部件分成几个部分。最后，我们绘制数字，表示介质的容量。
def OnSize(self, e):
self.Refresh()
每次调整窗口大小时，我们都会刷新小部件。这导致小部件重新绘制自身。
def OnScroll(self, e):
self.cw = self.sld.GetValue()
self.wid.Refresh()
如果我们滚动滑块的拇指，我们会得到实际值并将其保存到 self.cw 参数中。当绘制烧录小部件时，会使用此值。然后我们导致小部件被重新绘制。
CPU 小部件
有一些系统应用程序测量系统资源，如温度、内存或 CPU 占用率。创建专门的小部件以使应用程序更具吸引力。
以下小部件通常用于系统应用程序中。
cpu.py
#!/usr/bin/env python
"""
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()
我们创建一个黑色面板。然后我们在这个面板上绘制小矩形。矩形的颜色取决于滑块的值。颜色可以是深绿色或亮绿色。
dc.SetDeviceOrigin(0, 100) dc.SetAxisOrientation(True, True)
在这里，我们将默认的坐标系更改为笛卡尔坐标系。这是为了使绘画更直观。
pos = self.parent.GetParent().GetParent().sel rect = pos / 5
在这里，我们获取滑块的值。我们在每一列中有 20 个矩形。滑块有 100 个数字。rect 参数将滑块值转换为将以亮绿色绘制的矩形。
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 值，我们用深绿色绘制它；否则用亮绿色绘制。
在本章中，我们创建了 wxPython 中的自定义小部件。