PyQt5 QSpinBox – 为多个状态添加背景图像到向下箭头

QSpinBox是一个Qt widget，它允许用户通过增加或减少一个数字来选择一个值。 在本教程中，我们将学习如何为QSpinBox中的多个状态添加背景图像到向下箭头。

实现步骤

我们可以通过QStylePainter类中的drawPrimitive函数来绘制箭头状态的背景图像。

我们可以在QStyle::State_Enabled，QStyle::State_Disabled和QStyle::State_Active状态下绘制箭头的不同背景。

以下是实现此任务的详细步骤：

1. 创建一个QSpinBox窗口

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QSpinBox, QVBoxLayout

class Example(QWidget):

   def __init__(self):
      super().__init__()
      self.initUI()

   def initUI(self):
      vbox = QVBoxLayout()
      self.spinbox = QSpinBox(self)
      vbox.addWidget(self.spinbox)
      self.setLayout(vbox)

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('PyQt5 QSpinBox')
      self.show()

app = QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())

2. 为QStyle::State_Enabled状态添加背景图像

class Example(QWidget):

   def __init__(self):
      super().__init__()
      self.initUI()

   def initUI(self):
      vbox = QVBoxLayout()
      self.spinbox = QSpinBox(self)
      vbox.addWidget(self.spinbox)
      self.setLayout(vbox)

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('PyQt5 QSpinBox')
      self.show()

   def paintEvent(self, event):
      spinbox = self.spinbox
      if spinbox is None:
         return

      qp = QtGui.QPainter()
      qp.begin(self)

      rect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxFrame, self)
      rect.adjust(2, 2, -2, -2)

      opt = QStyleOptionSpinBox()
      opt.rect = rect
      opt.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_FrameSpinBox, opt, qp, spinbox)

      upRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxUp, self)
      upRect.adjust(2, 2, -2, -2)

      optUp = QStyleOptionSpinBox()
      optUp.rect = upRect
      optUp.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowUp, optUp, qp, spinbox)

      if self.spinbox.value() != self.spinbox.minimum():
         downRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxDown, self)
         downRect.adjust(2, 2, -2, -2)

         optDown = QStyleOptionSpinBox()
         optDown.rect = downRect
         optDown.state |= QStyle.State_Enabled | QStyle.State_Active
         spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowDown, optDown, qp, spinbox)

      qp.end()

在上述代码中，我们使用QStyle::State_Enabled状态来绘制箭头的背景。如果需要为QStyle::State_Disabled状态添加背景图像，请使用以下代码：

optDown = QStyleOptionSpinBox()
optDown.rect = downRect
optDown.state |= QStyle.State_Sunken
spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowDown, optDown, qp, spinbox)

如果需要为QStyle::State_Active状态添加背景图像，请使用以下代码：

optDown = QStyleOptionSpinBox()
optDown.rect = downRect
optDown.state |= QStyle.State_Active
spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowDown, optDown, qp, spinbox)

3. 附加背景图像

我们可以使用QStyle::SP_ArrowDown和QStyle::SP_ArrowUp来获取箭头图像，并使用drawPixmap函数将其附加到QStyle::State_Enabled状态的箭头背景上。

class Example(QWidget):

   def __init__(self):
      super().__init__()
      self.initUI()

   def initUI(self):
      vbox = QVBoxLayout()
      self.spinbox = QSpinBox(self)
      vbox.addWidget(self.spinbox)
      self.setLayout(vbox)

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('PyQt5 QSpinBox')
      self.show()

   def paintEvent(self, event):
      spinbox = self.spinbox
      if spinbox is None:
         return

      qp = QtGui.QPainter()
      qp.begin(self)

      rect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxFrame, self)
      rect.adjust(2, 2, -2, -2)

      opt = QStyleOptionSpinBox()
      opt.rect = rect
      opt.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_FrameSpinBox, opt, qp, spinbox)

      upRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxUp, self)
      upRect.adjust(2, 2, -2, -2)

      optUp = QStyleOptionSpinBox()
      optUp.rect = upRect
      optUp.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowUp, optUp, qp, spinbox)

      if self.spinbox.value() != self.spinbox.minimum():
         downRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxDown, self)
         downRect.adjust(2, 2, -2, -2)

         optDown = QStyleOptionSpinBox()
         optDown.rect = downRect
         optDown.state |= QStyle.State_Enabled | QStyle.State_Active

         # Add background image
         optDown.icon = qApp.style().standardIcon(QStyle.SP_ArrowDown)

         spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowDown, optDown, qp, spinbox)

      qp.end()

在上述代码中，我们使用了QStyle::SP_ArrowDown和QStyle::SP_ArrowUp来获取箭头图像，并使用drawPixmap函数将其附加到箭头背景上。

完整代码片段

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QSpinBox, QVBoxLayout
from PyQt5.QtGui import QPainter, QStyleOptionSpinBox

class Example(QWidget):

   def __init__(self):
      super().__init__()
      self.initUI()

   def initUI(self):
      vbox = QVBoxLayout()
      self.spinbox = QSpinBox(self)
      vbox.addWidget(self.spinbox)
      self.setLayout(vbox)

      self.setGeometry(300, 300, 300, 200)
      self.setWindowTitle('PyQt5 QSpinBox')
      self.show()

   def paintEvent(self, event):
      spinbox = self.spinbox
      if spinbox is None:
         return

      qp = QPainter()
      qp.begin(self)

      rect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxFrame, self)
      rect.adjust(2, 2, -2, -2)

      opt = QStyleOptionSpinBox()
      opt.rect = rect
      opt.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_FrameSpinBox, opt, qp, spinbox)

      upRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxUp, self)
      upRect.adjust(2, 2, -2, -2)

      optUp = QStyleOptionSpinBox()
      optUp.rect = upRect
      optUp.state |= QStyle.State_Enabled | QStyle.State_Sunken | QStyle.State_Active
      spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowUp, optUp, qp, spinbox)

      if self.spinbox.value() != self.spinbox.minimum():
         downRect = spinbox.style().subControlRect(QStyle.CC_SpinBox, spinbox, QStyle.SC_SpinBoxDown, self)
         downRect.adjust(2, 2, -2, -2)

         optDown = QStyleOptionSpinBox()
         optDown.rect = downRect
         optDown.state |= QStyle.State_Enabled | QStyle.State_Active

         # Add background image
         optDown.icon = qApp.style().standardIcon(QStyle.SP_ArrowDown)

         spinbox.style().drawPrimitive(QStyle.PE_IndicatorArrowDown, optDown, qp, spinbox)

      qp.end()

if __name__ == '__main__':
   app = QApplication(sys.argv)
   ex = Example()
   sys.exit(app.exec_())

在这里，我们使用了PyQt5的QSpinBox，QVBoxLayout，QPainter和QStyleOptionSpinBox类来创建多个状态背景图像。