PyQt5 ComboBox - Pressed with Different Border Color

在 PyQt5 中，ComboBox 提供了一种在下拉菜单中选择选项的可视化方式。默认情况下，ComboBox 的边框颜色是相同的，无论其是否被按下。在本教程中，我们将使用 PyQt5 来创建一个 ComboBox，当 ComboBox 被按下时，其边框颜色将发生变化。

实现方法

要实现此目的，我们需要通过继承 ComboBox 类并在其中创建一个自定义 paintEvent() 方法，该方法将渲染 ComboBox 的边框。接下来，我们将在自定义 ComboBox 的 mousePressEvent() 方法中更新边框颜色。当按下 ComboBox 时，将在此方法中调用 update() 方法以触发 ComboBox 重新绘制。

以下是实现此方法的示例代码：

from PyQt5.QtWidgets import QComboBox, QApplication
from PyQt5.QtGui import QPainter, QColor, QPen
from PyQt5.QtCore import Qt

class CustomComboBox(QComboBox):
    def __init__(self, parent=None):
        super(CustomComboBox, self).__init__(parent)

        # 设置样式表
        self.setStyleSheet("""
            QComboBox {
                border: 2px solid gray;
                border-radius: 8px;
                padding: 1px 18px 1px 3px;
                min-width: 6em;
            }
            
            QComboBox::drop-down {
                subcontrol-origin: padding;
                subcontrol-position: top right;
                width: 20px;
                border-left-width: 1px;
                border-left-color: darkgray;
                border-left-style: solid;
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
            
            QComboBox::down-arrow {
                image: url(down_arrow.png);
            }
            
            QComboBox::down-arrow:on {
                top: 1px;
                left: 1px;
            }
        """)

        # 初始化 ComboBox 的边框颜色
        self.borderColor = QColor(128, 128, 128)

    def paintEvent(self, event):
        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)

        # 渲染 ComboBox 边框
        pen = QPen(self.borderColor, 2)
        painter.setPen(pen)
        painter.drawRoundedRect(self.rect(), 8, 8)

        # 渲染 ComboBox 选中的条目
        option = self.view().currentIndex()
        if option.isValid():
            rect = self.view().visualRect(option)
            painter.drawText(rect, Qt.AlignLeft | Qt.AlignVCenter,
                             self.itemText(option))

    def mousePressEvent(self, event):
        # 更新 ComboBox 边框颜色
        self.borderColor = QColor(0, 120, 215)
        self.update()

        super(CustomComboBox, self).mousePressEvent(event)

    def mouseReleaseEvent(self, event):
        # 恢复 ComboBox 边框颜色
        self.borderColor = QColor(128, 128, 128)
        self.update()

        super(CustomComboBox, self).mouseReleaseEvent(event)

if __name__ == '__main__':
    app = QApplication([])
    combo = CustomComboBox()
    combo.addItems(['Option 1', 'Option 2', 'Option 3'])
    combo.show()
    app.exec_()

代码解析

代码中，我们首先创建了一个名为 CustomComboBox 的新类，该类继承了 QComboBox。在该类的构造函数中，首先设置了 ComboBox 的样式表。在此样式表中，我们可以定义 ComboBox 的边框样式、下拉按钮样式等等。要实现本文主题，我们将在 paintEvent() 方法中渲染 ComboBox 的边框。我们还初始化了 ComboBox 的边框颜色，并将其设置为灰色。然后，我们重写了 mousePressEvent() 方法，该方法在按下 ComboBox 时被调用。在此方法中，我们将 ComboBox 的边框颜色设置为蓝色，并调用 update() 方法以触发 ComboBox 重新绘制。同样，在 mouseReleaseEvent() 方法中，我们将边框颜色恢复为灰色并更新 ComboBox。

最后，我们在 if name == 'main' 中创建了一个应用程序并显示了自定义 ComboBox，其中包含三个选项（'Option 1'，'Option 2'和'Option 3'）。

结论

在本教程中，我们学习了如何使用 PyQt5 创建一个 ComboBox，并在按下 ComboBox 时更改其边框颜色。要实现此目的，我们使用了自定义 paintEvent() 和 mousePressEvent() / mouseReleaseEvent() 方法。通过阅读此教程，您可以深入了解如何使用 PyQt5 中的自定义事件来实现各种用户界面效果。