# PyQt5 中的自定義小部件 > 原文： [http://zetcode.com/gui/pyqt5/customwidgets/](http://zetcode.com/gui/pyqt5/customwidgets/) PyQt5 具有豐富的小部件集。 但是，沒有工具包可以向程序員提供在其應用中可能需要的所有小部件。 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件或滑塊。 如果需要更專業的小部件，我們必須自己創建它。 使用工具箱提供的繪圖工具創建自定義窗口小部件。 有兩種基本的可能性：程序員可以修改或增強現有的小部件，或者可以從頭開始創建自定義小部件。 ## 刻錄小部件 這是一個小部件，我們可以在 Nero，K3B 或其他 CD/DVD 刻錄軟件中看到。 `customwidget.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- """ ZetCode PyQt5 tutorial In this example, we create a custom widget. Author: Jan Bodnar Website: zetcode.com Last edited: August 2017 """ from PyQt5.QtWidgets import (QWidget, QSlider, QApplication, QHBoxLayout, QVBoxLayout) from PyQt5.QtCore import QObject, Qt, pyqtSignal from PyQt5.QtGui import QPainter, QFont, QColor, QPen import sys class Communicate(QObject): updateBW = pyqtSignal(int) class BurningWidget(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): self.setMinimumSize(1, 30) self.value = 75 self.num = [75, 150, 225, 300, 375, 450, 525, 600, 675] def setValue(self, value): self.value = value def paintEvent(self, e): qp = QPainter() qp.begin(self) self.drawWidget(qp) qp.end() def drawWidget(self, qp): MAX_CAPACITY = 700 OVER_CAPACITY = 750 font = QFont('Serif', 7, QFont.Light) qp.setFont(font) size = self.size() w = size.width() h = size.height() step = int(round(w / 10)) till = int(((w / OVER_CAPACITY) * self.value)) full = int(((w / OVER_CAPACITY) * MAX_CAPACITY)) if self.value >= MAX_CAPACITY: qp.setPen(QColor(255, 255, 255)) qp.setBrush(QColor(255, 255, 184)) qp.drawRect(0, 0, full, h) qp.setPen(QColor(255, 175, 175)) qp.setBrush(QColor(255, 175, 175)) qp.drawRect(full, 0, till-full, h) else: qp.setPen(QColor(255, 255, 255)) qp.setBrush(QColor(255, 255, 184)) qp.drawRect(0, 0, till, h) pen = QPen(QColor(20, 20, 20), 1, Qt.SolidLine) qp.setPen(pen) qp.setBrush(Qt.NoBrush) qp.drawRect(0, 0, w-1, h-1) j = 0 for i in range(step, 10*step, step): qp.drawLine(i, 0, i, 5) metrics = qp.fontMetrics() fw = metrics.width(str(self.num[j])) qp.drawText(i-fw/2, h/2, str(self.num[j])) j = j + 1 class Example(QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): OVER_CAPACITY = 750 sld = QSlider(Qt.Horizontal, self) sld.setFocusPolicy(Qt.NoFocus) sld.setRange(1, OVER_CAPACITY) sld.setValue(75) sld.setGeometry(30, 40, 150, 30) self.c = Communicate() self.wid = BurningWidget() self.c.updateBW[int].connect(self.wid.setValue) sld.valueChanged[int].connect(self.changeValue) hbox = QHBoxLayout() hbox.addWidget(self.wid) vbox = QVBoxLayout() vbox.addStretch(1) vbox.addLayout(hbox) self.setLayout(vbox) self.setGeometry(300, 300, 390, 210) self.setWindowTitle('Burning widget') self.show() def changeValue(self, value): self.c.updateBW.emit(value) self.wid.repaint() if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) ``` 在我們的示例中，我們有一個`QSlider`和一個自定義小部件。 滑塊控制自定義窗口小部件。 此小部件以圖形方式顯示了介質的總容量和可供我們使用的可用空間。 我們的自定義窗口小部件的最小值是 1，最大值是`OVER_CAPACITY`。 如果達到值`MAX_CAPACITY`，我們將開始繪制紅色。 這通常表示過度燃燒。 刻錄小部件位于窗口的底部。 這可以通過使用一個`QHBoxLayout`和一個`QVBoxLayout`來實現。 ```py class BurningWidget(QWidget): def __init__(self): super().__init__() ``` 它基于`QWidget`小部件的刻錄小部件。 ```py self.setMinimumSize(1, 30) ``` 我們更改小部件的最小大小（高度）。 默認值對我們來說有點小。 ```py font = QFont('Serif', 7, QFont.Light) qp.setFont(font) ``` 我們使用的字體比默認字體小。 這更適合我們的需求。 ```py size = self.size() w = size.width() h = size.height() step = int(round(w / 10)) till = int(((w / OVER_CAPACITY) * self.value)) full = int(((w / OVER_CAPACITY) * MAX_CAPACITY)) ``` 我們動態繪制小部件。 窗口越大，刻錄的窗口小部件越大，反之亦然。 這就是為什么我們必須計算在其上繪制自定義窗口小部件的窗口小部件的大小的原因。 `till`參數確定要繪制的總大小。 該值來自滑塊小部件。 它占整個面積的一部分。 `full`參數確定我們開始用紅色繪制的點。 實際圖紙包括三個步驟。 我們繪制黃色或紅色和黃色矩形。 然后，我們繪制垂直線，將小部件分為幾個部分。 最后，我們畫出表示介質容量的數字。 ```py metrics = qp.fontMetrics() fw = metrics.width(str(self.num[j])) qp.drawText(i-fw/2, h/2, str(self.num[j])) ``` 我們使用字體指標來繪制文本。 我們必須知道文本的寬度，以便使其圍繞垂直線居中。 ```py def changeValue(self, value): self.c.updateBW.emit(value) self.wid.repaint() ``` 當我們移動滑塊時，將調用`changeValue()`方法。 在方法內部，我們發送帶有參數的自定義`updateBW`信號。 該參數是滑塊的當前值。 該值隨后用于計算刻錄小部件的容量。 然后將自定義窗口小部件重新粉刷。  圖：刻錄小部件 在 PyQt5 教程的這一部分中，我們創建了一個自定義小部件。