PyQt5 ComboBox – 可编辑和鼠标悬停时不同的边框颜色

在PyQt5中，ComboBox是一种常用的用户界面控件，用于提供下拉式列表选择用户输入值的功能。本文将介绍如何通过修改ComboBox的样式表来实现以下效果：

• 当ComboBox不可编辑时，边框颜色为灰色；
• 当ComboBox可编辑且鼠标未悬停时，边框颜色为浅蓝色；
• 当ComboBox可编辑且鼠标悬停时，边框颜色为深蓝色。

样式表的简介

在PyQt5中，可以使用样式表（Stylesheet）来改变Qt控件的外观和风格。样式表的格式类似于CSS，包含一系列属性和值，并可通过Qt样式表编辑器或手动编写来实现。

下面是一个使用样式表修改QComboBox外观的例子：

self.comboBox.setStyleSheet("""
    QComboBox {
        border: 1px solid grey;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
""")

这个样式表定义了一个QComboBox的基本外观，包括边框、圆角、内边距和最小宽度等属性。在样式表中，使用了CSS的语法来表示各种属性和值，例如“border: 1px solid grey;”表示边框宽度为1px，边框样式为实线，边框颜色为灰色。

实现不同状态下的边框颜色

为了实现ComboBox不同状态下的边框颜色，我们需要编写一些条件语句来判断当前ComboBox的状态，并根据不同状态设置不同的样式表。

在下面的代码中，使用了以下三个样式表：

# 不可编辑状态下的样式表，边框颜色为灰色
inactive_stylesheet = """
    QComboBox {
        border: 1px solid grey;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

# 鼠标未悬停的可编辑状态下的样式表，边框颜色为浅蓝色
editable_stylesheet = """
    QComboBox:!hover {
        border: 1px solid #add8e6;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

# 鼠标悬停的可编辑状态下的样式表，边框颜色为深蓝色
hover_stylesheet = """
    QComboBox:hover {
        border: 1px solid navy;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

其中，inactive_stylesheet表示ComboBox不可编辑状态下的样式表，边框颜色为灰色；editable_stylesheet表示ComboBox可编辑且鼠标未悬停状态下的样式表，边框颜色为浅蓝色；hover_stylesheet表示ComboBox可编辑且鼠标悬停状态下的样式表，边框颜色为深蓝色。

接下来，我们在程序中使用以下代码在ComboBox的各种状态下分别应用不同的样式表：

# ComboBox被选中时的槽函数
def onComboBoxActivated(self):
    isEditable = self.comboBox.isEditable()  # ComboBox是否可编辑
    isActive = not self.comboBox.view().isVisible()  # ComboBox是否是下拉式列表

    # 根据当前状态应用不同的样式表
    if not isEditable:
        self.comboBox.setStyleSheet(inactive_stylesheet)
    elif isActive:
        self.comboBox.setStyleSheet(hover_stylesheet)
    else:
        self.comboBox.setStyleSheet(editable_stylesheet)

在以上代码中，先通过self.comboBox.isEditable()和not self.comboBox.view().isVisible()获取ComboBox的当前状态，然后根据状态应用不同的样式表。

最后，在ComboBox的activated信号中调用onComboBoxActivated槽函数即可实现ComboBox不同状态下的边框颜色。

完整代码

下面是完整的示例代码，包括了ComboBox的初始化、信号槽连接和样式表设置等操作。

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

# 不可编辑状态下的样式表，边框颜色为灰色
inactive_stylesheet = """
    QComboBox {
        border: 1px solid grey;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

# 鼠标未悬停的可编辑状态下的样式表，边框颜色为浅蓝色
editable_stylesheet = """
    QComboBox:!hover {
        border: 1px solid #add8e6;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

# 鼠标悬停的可编辑状态下的样式表，边框颜色为深蓝色
hover_stylesheet = """
    QComboBox:hover {
        border: 1px solid navy;
        border-radius: 3px;
        padding: 1px 18px 1px 3px;
        min-width: 6em;
    }
"""

class ComboBoxDemo(QWidget):
    def __init__(self):
        super().__init__()

        self.initUI()

    def initUI(self):
        # 创建ComboBox控件
        self.comboBox = QComboBox(self)
        self.comboBox.setEditable(True)
        self.comboBox.addItems(['Python', 'Java', 'C++'])
        self.comboBox.activated.connect(self.onComboBoxActivated)

        # 创建布局管理器
        layout = QVBoxLayout(self)
        layout.addWidget(self.comboBox)

        # 初始化ComboBox样式表
        self.comboBox.setStyleSheet(inactive_stylesheet)

    # ComboBox被选中时的槽函数
    def onComboBoxActivated(self):
        isEditable = self.comboBox.isEditable()  # ComboBox是否可编辑
        isActive = not self.comboBox.view().isVisible()  # ComboBox是否是下拉式列表

        # 根据当前状态应用不同的样式表
        if not isEditable:
            self.comboBox.setStyleSheet(inactive_stylesheet)
        elif isActive:
            self.comboBox.setStyleSheet(hover_stylesheet)
        else:
            self.comboBox.setStyleSheet(editable_stylesheet)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = ComboBoxDemo()
    w.show()
    sys.exit(app.exec_())

运行程序后，可以看到ComboBox不同状态下的边框颜色效果。