原文： http://zetcode.com/gui/pyqt5/customwidgets/

PyQt5 具有丰富的小部件集。 但是，没有工具包可以向程序员提供在其应用中可能需要的所有小部件。 工具箱通常仅提供最常见的窗口小部件，例如按钮，文本窗口小部件或滑块。 如果需要更专业的小部件，我们必须自己创建它。

使用工具箱提供的绘图工具创建自定义窗口小部件。 有两种基本的可能性：程序员可以修改或增强现有的小部件，或者可以从头开始创建自定义小部件。

刻录小部件

这是一个小部件，我们可以在 Nero，K3B 或其他 CD/DVD 刻录软件中看到。

customwidget.py

  1. #!/usr/bin/python3
  2. # -*- coding: utf-8 -*-
  4. """
  5. ZetCode PyQt5 tutorial 
  7. In this example, we create a custom widget.
  9. Author: Jan Bodnar
  10. Website: zetcode.com 
  11. Last edited: August 2017
  12. """
  14. from PyQt5.QtWidgets import (QWidget, QSlider, QApplication, 
  15.     QHBoxLayout, QVBoxLayout)
  16. from PyQt5.QtCore import QObject, Qt, pyqtSignal
  17. from PyQt5.QtGui import QPainter, QFont, QColor, QPen
  18. import sys
  20. class Communicate(QObject):
  22.     updateBW = pyqtSignal(int)
  24. class BurningWidget(QWidget):
  26.     def __init__(self):      
  27.         super().__init__()
  29.         self.initUI()
  31.     def initUI(self):
  33.         self.setMinimumSize(1, 30)
  34.         self.value = 75
  35.         self.num = [75, 150, 225, 300, 375, 450, 525, 600, 675]
  37.     def setValue(self, value):
  39.         self.value = value
  41.     def paintEvent(self, e):
  43.         qp = QPainter()
  44.         qp.begin(self)
  45.         self.drawWidget(qp)
  46.         qp.end()
  48.     def drawWidget(self, qp):
  50.         MAX_CAPACITY = 700
  51.         OVER_CAPACITY = 750
  53.         font = QFont('Serif', 7, QFont.Light)
  54.         qp.setFont(font)
  56.         size = self.size()
  57.         w = size.width()
  58.         h = size.height()
  60.         step = int(round(w / 10))
  62.         till = int(((w / OVER_CAPACITY) * self.value))
  63.         full = int(((w / OVER_CAPACITY) * MAX_CAPACITY))
  65.         if self.value >= MAX_CAPACITY:
  67.             qp.setPen(QColor(255, 255, 255))
  68.             qp.setBrush(QColor(255, 255, 184))
  69.             qp.drawRect(0, 0, full, h)
  70.             qp.setPen(QColor(255, 175, 175))
  71.             qp.setBrush(QColor(255, 175, 175))
  72.             qp.drawRect(full, 0, till-full, h)
  74.         else:
  76.             qp.setPen(QColor(255, 255, 255))
  77.             qp.setBrush(QColor(255, 255, 184))
  78.             qp.drawRect(0, 0, till, h)
  80.         pen = QPen(QColor(20, 20, 20), 1, 
  81.             Qt.SolidLine)
  83.         qp.setPen(pen)
  84.         qp.setBrush(Qt.NoBrush)
  85.         qp.drawRect(0, 0, w-1, h-1)
  87.         j = 0
  89.         for i in range(step, 10*step, step):
  91.             qp.drawLine(i, 0, i, 5)
  92.             metrics = qp.fontMetrics()
  93.             fw = metrics.width(str(self.num[j]))
  94.             qp.drawText(i-fw/2, h/2, str(self.num[j]))
  95.             j = j + 1
  97. class Example(QWidget):
  99.     def __init__(self):
  100.         super().__init__()
  102.         self.initUI()
  104.     def initUI(self):      
  106.         OVER_CAPACITY = 750
  108.         sld = QSlider(Qt.Horizontal, self)
  109.         sld.setFocusPolicy(Qt.NoFocus)
  110.         sld.setRange(1, OVER_CAPACITY)
  111.         sld.setValue(75)
  112.         sld.setGeometry(30, 40, 150, 30)
  114.         self.c = Communicate()        
  115.         self.wid = BurningWidget()
  116.         self.c.updateBW[int].connect(self.wid.setValue)
  118.         sld.valueChanged[int].connect(self.changeValue)
  119.         hbox = QHBoxLayout()
  120.         hbox.addWidget(self.wid)
  121.         vbox = QVBoxLayout()
  122.         vbox.addStretch(1)
  123.         vbox.addLayout(hbox)
  124.         self.setLayout(vbox)
  126.         self.setGeometry(300, 300, 390, 210)
  127.         self.setWindowTitle('Burning widget')
  128.         self.show()
  130.     def changeValue(self, value):
  132.         self.c.updateBW.emit(value)        
  133.         self.wid.repaint()
  135. if __name__ == '__main__':
  137.     app = QApplication(sys.argv)
  138.     ex = Example()
  139.     sys.exit(app.exec_())

在我们的示例中，我们有一个QSlider和一个自定义小部件。 滑块控制自定义窗口小部件。 此小部件以图形方式显示了介质的总容量和可供我们使用的可用空间。 我们的自定义窗口小部件的最小值是 1，最大值是OVER_CAPACITY。 如果达到值MAX_CAPACITY，我们将开始绘制红色。 这通常表示过度燃烧。

刻录小部件位于窗口的底部。 这可以通过使用一个QHBoxLayout和一个QVBoxLayout来实现。

  1. class BurningWidget(QWidget):
  3.     def __init__(self):      
  4.         super().__init__()

它基于QWidget小部件的刻录小部件。

  1. self.setMinimumSize(1, 30)

我们更改小部件的最小大小（高度）。 默认值对我们来说有点小。

  1. font = QFont('Serif', 7, QFont.Light)
  2. qp.setFont(font)

我们使用的字体比默认字体小。 这更适合我们的需求。

  1. size = self.size()
  2. w = size.width()
  3. h = size.height()
  5. step = int(round(w / 10))
  7. till = int(((w / OVER_CAPACITY) * self.value))
  8. full = int(((w / OVER_CAPACITY) * MAX_CAPACITY))

我们动态绘制小部件。 窗口越大，刻录的窗口小部件越大，反之亦然。 这就是为什么我们必须计算在其上绘制自定义窗口小部件的窗口小部件的大小的原因。 till参数确定要绘制的总大小。 该值来自滑块小部件。 它占整个面积的一部分。 full参数确定我们开始用红色绘制的点。

实际图纸包括三个步骤。 我们绘制黄色或红色和黄色矩形。 然后，我们绘制垂直线，将小部件分为几个部分。 最后，我们画出表示介质容量的数字。

  1. metrics = qp.fontMetrics()
  2. fw = metrics.width(str(self.num[j]))
  3. qp.drawText(i-fw/2, h/2, str(self.num[j]))

我们使用字体指标来绘制文本。 我们必须知道文本的宽度，以便使其围绕垂直线居中。

  1. def changeValue(self, value):
  3.     self.c.updateBW.emit(value)        
  4.     self.wid.repaint()

当我们移动滑块时，将调用changeValue()方法。 在方法内部，我们发送带有参数的自定义updateBW信号。 该参数是滑块的当前值。 该值随后用于计算刻录小部件的容量。 然后将自定义窗口小部件重新粉刷。

PyQt5 中的自定义小部件 - 图1

图：刻录小部件

在 PyQt5 教程的这一部分中，我们创建了一个自定义小部件。