• 自定义控件
    • Burning widget

    自定义控件

    PyQt5有丰富的组件，但是肯定满足不了所有开发者的所有需求，PyQt5只提供了基本的组件，像按钮，文本，滑块等。如果你还需要其他的模块，应该尝试自己去自定义一些。

    自定义组件使用绘画工具创建，有两个基本方式：根据已有的创建或改进；通过自己绘图创建。

    Burning widget

    这个组件我们会在Nero，K3B，或者其他CD/DVD烧录软件中见到。

    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)
    25. class BurningWidget(QWidget):
    27.     def __init__(self):      
    28.         super().__init__()
    30.         self.initUI()
    33.     def initUI(self):
    35.         self.setMinimumSize(1, 30)
    36.         self.value = 75
    37.         self.num = [75, 150, 225, 300, 375, 450, 525, 600, 675]
    40.     def setValue(self, value):
    42.         self.value = value
    45.     def paintEvent(self, e):
    47.         qp = QPainter()
    48.         qp.begin(self)
    49.         self.drawWidget(qp)
    50.         qp.end()
    53.     def drawWidget(self, qp):
    55.         MAX_CAPACITY = 700
    56.         OVER_CAPACITY = 750
    58.         font = QFont('Serif', 7, QFont.Light)
    59.         qp.setFont(font)
    61.         size = self.size()
    62.         w = size.width()
    63.         h = size.height()
    65.         step = int(round(w / 10))
    68.         till = int(((w / OVER_CAPACITY) * self.value))
    69.         full = int(((w / OVER_CAPACITY) * MAX_CAPACITY))
    71.         if self.value >= MAX_CAPACITY:
    73.             qp.setPen(QColor(255, 255, 255))
    74.             qp.setBrush(QColor(255, 255, 184))
    75.             qp.drawRect(0, 0, full, h)
    76.             qp.setPen(QColor(255, 175, 175))
    77.             qp.setBrush(QColor(255, 175, 175))
    78.             qp.drawRect(full, 0, till-full, h)
    80.         else:
    82.             qp.setPen(QColor(255, 255, 255))
    83.             qp.setBrush(QColor(255, 255, 184))
    84.             qp.drawRect(0, 0, till, h)
    87.         pen = QPen(QColor(20, 20, 20), 1, 
    88.             Qt.SolidLine)
    90.         qp.setPen(pen)
    91.         qp.setBrush(Qt.NoBrush)
    92.         qp.drawRect(0, 0, w-1, h-1)
    94.         j = 0
    96.         for i in range(step, 10*step, step):
    98.             qp.drawLine(i, 0, i, 5)
    99.             metrics = qp.fontMetrics()
    100.             fw = metrics.width(str(self.num[j]))
    101.             qp.drawText(i-fw/2, h/2, str(self.num[j]))
    102.             j = j + 1
    105. class Example(QWidget):
    107.     def __init__(self):
    108.         super().__init__()
    110.         self.initUI()
    113.     def initUI(self):      
    115.         OVER_CAPACITY = 750
    117.         sld = QSlider(Qt.Horizontal, self)
    118.         sld.setFocusPolicy(Qt.NoFocus)
    119.         sld.setRange(1, OVER_CAPACITY)
    120.         sld.setValue(75)
    121.         sld.setGeometry(30, 40, 150, 30)
    123.         self.c = Communicate()        
    124.         self.wid = BurningWidget()
    125.         self.c.updateBW[int].connect(self.wid.setValue)
    127.         sld.valueChanged[int].connect(self.changeValue)
    128.         hbox = QHBoxLayout()
    129.         hbox.addWidget(self.wid)
    130.         vbox = QVBoxLayout()
    131.         vbox.addStretch(1)
    132.         vbox.addLayout(hbox)
    133.         self.setLayout(vbox)
    135.         self.setGeometry(300, 300, 390, 210)
    136.         self.setWindowTitle('Burning widget')
    137.         self.show()
    140.     def changeValue(self, value):
    142.         self.c.updateBW.emit(value)        
    143.         self.wid.repaint()
    146. if __name__ == '__main__':
    148.     app = QApplication(sys.argv)
    149.     ex = Example()
    150.     sys.exit(app.exec_())

    本例中，我们使用了QSlider和一个自定义组件，由进度条控制。显示的有物体（也就是CD/DVD）的总容量和剩余容量。进度条的范围是1~750。如果值达到了700（OVER_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.0))
    8. till = int(((w / 750.0) * self.value))
    9. full = int(((w / 750.0) * 700))

    动态的渲染组件，随着窗口的大小而变化，这就是我们计算窗口大小的原因。最后一个参数决定了组件的最大范围，进度条的值是由窗口大小按比例计算出来的。最大值的地方填充的是红色。注意这里使用的是浮点数，能提高计算和渲染的精度。

    绘画由三部分组成，黄色或红色区域和黄色矩形，然后是分割线，最后是添上代表容量的数字。

    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信号。参数就是滑块的当前位置。这个数值之后还用来于Burning组件，然后重新渲染Burning组件。

    burning widget