PyQt5 QSpinBox – 按下时为向上箭头添加边框

简介

在PyQt5中，使用QSpinBox小部件可以让用户可以通过增加或减少一个固定数量的值来选择一个整数。默认情况下，QSpinBox小部件中的向上和向下箭头是没有边框的。如果开发者想要在用户按下向上箭头时为其添加边框，本文将介绍如何实现这一效果。

实现步骤

要为QSpinBox小部件的向上箭头添加边框，我们需要继承QSpinBox并覆盖paintEvent()方法。paintEvent()方法是QT中许多控件类的虚函数。在这个方法内部，我们可以通过使用QStyleDecoration类的drawPrimitive()方法来绘制所需的箭头。QStyleDecoration类是QStyle类的一个子类，用于绘制不同类型控件的外观。

步骤1：创建自定义类

class StyledSpinBox(QtWidgets.QSpinBox):
    def __init__(self, parent=None):
        QtWidgets.QSpinBox.__init__(self, parent)
        self.setStyleSheet("QSpinBox::up-button { width:15px }")

首先，我们需要创建一个自定义类，继承自QSpinBox。在这个类的构造函数内，我们将QSpinBox的构造函数调用后，设置一个新的样式表，用于调整箭头的大小。这里，我们设置了向上箭头的宽度为15像素。从这里开始的整个过程都将在我们创建的这个自定义类内进行。

步骤2：覆盖paintEvent函数

def paintEvent(self, event):
    opt = QtWidgets.QStyleOptionSpinBox()
    self.initStyleOption(opt)
    opt.subControls = QtWidgets.QStyle.SC_SpinBoxUp

    # Draw the control
    p = QtGui.QPainter(self)
    self.style().drawComplexControl(QtWidgets.QStyle.CC_SpinBox, opt, p, self)

    # Draw the arrow
    p.setPen(self.palette().color(QtGui.QPalette.ButtonText))
    p.setBrush(self.palette().brush(QtGui.QPalette.ButtonText))
    p.save()

    # Arrow width
    vx = 8
    vy = 6

    x = int(self.width() / 2) - vx
    y = int(self.height() / 2) - vy

    p.translate(x, y)
    p.drawPolygon(QtGui.QPolygon([QtCore.QPoint(0, 0), QtCore.QPoint(vx * 2, 0), QtCore.QPoint(vx, vy * 2)]))
    p.restore()

接下来，在我们的自定义类中，覆盖paintEvent()方法。在这个方法里，我们要采取以下步骤：

1. 获得样式选项
2. 使用Qt的QStyleDecoration类来绘制向上箭头的边框和箭头。
3. 设置箭头的风格，然后绘制它。

通过这些步骤，我们就能成功实现向上箭头边框的添加。

完整代码

from PyQt5 import QtCore, QtGui, QtWidgets

class StyledSpinBox(QtWidgets.QSpinBox):
    def __init__(self, parent=None):
        QtWidgets.QSpinBox.__init__(self, parent)
        self.setStyleSheet("QSpinBox::up-button { width:15px }")

    def paintEvent(self, event):
        opt = QtWidgets.QStyleOptionSpinBox()
        self.initStyleOption(opt)
        opt.subControls = QtWidgets.QStyle.SC_SpinBoxUp

        # Draw the control
        p = QtGui.QPainter(self)
        self.style().drawComplexControl(QtWidgets.QStyle.CC_SpinBox, opt, p, self)

        # Draw the arrow
        p.setPen(self.palette().color(QtGui.QPalette.ButtonText))
        p.setBrush(self.palette().brush(QtGui.QPalette.ButtonText))
        p.save()

        # Arrow width
        vx = 8
        vy = 6

        x = int(self.width() / 2) - vx
        y = int(self.height() / 2) - vy

        p.translate(x, y)
        p.drawPolygon(QtGui.QPolygon([QtCore.QPoint(0, 0), QtCore.QPoint(vx * 2, 0), QtCore.QPoint(vx, vy * 2)]))
        p.restore()


if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    win = QtWidgets.QWidget()
    layout = QtWidgets.QVBoxLayout()
    spinbox = StyledSpinBox()
    layout.addWidget(spinbox)
    win.setLayout(layout)
    win.show()
    app.exec_()

运行结果

参考文献

1. QSpinBox — PySide2 documentation
2. Qt Style Sheets Examples
3. QStyle — PySide2 documentation
4. Qt Style Sheets Reference