PyQt5 – 鼠标悬停时可编辑组合框的背景图像

在 PyQt5 中，我们可以使用样式表为组合框添加背景图像。在这个例子中，我们将学习如何使组合框在鼠标悬停时改变背景图像。

效果图

代码解释

在这个例子中，我们将使用三个不同的图像来代表不同的状态：

• 正常状态下的背景图像。
• 鼠标悬停时的背景图像。
• 选中项时的背景图像。

我们将通过对组合框使用 setStyleSheet() 方法来应用样式表，并为每个状态设置不同的样式。

首先，我们定义了三个变量来保存这些图像的路径。然后我们定义了一个类名为 ComboBoxBackgroundImage 作为我们的主窗口。

第一步是在构造函数中初始化界面和信号插槽：

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

        self.initUI()

        self.setMouseTracking(True)

在这里，我们初始化了用户界面并启用了鼠标跟踪功能。

    def initUI(self):

        # 设置窗口标题
        self.setWindowTitle('ComboBox Background Image')

        # 创建组合框，并将其放置在窗口中心
        self.combo = QComboBox(self)
        self.combo.addItem('Apple')
        self.combo.addItem('Banana')
        self.combo.addItem('Cherry')
        self.combo.addItem('Durian')
        self.combo.addItem('Elderberry')
        self.combo.move(50, 50)

        # 设置组合框的样式表
        self.combo.setStyleSheet(self.getStyle('normal'))

        # 将组合框选择更改信号连接到我们的插槽
        self.combo.currentIndexChanged.connect(self.onIndexChanged)

在这里，我们创建了一个组合框并将其添加到窗口中心。我们还将组合框的样式表设置为 normal 状态下的样式表，并将 currentIndexChanged 信号连接到 onIndexChanged 插槽。

现在，我们需要为我们的组合框设置不同状态的样式表。我们将在 getStyle() 函数中定义这些样式表：

    def getStyle(self, state):

        normal = "QComboBox { background-image: url(" + self.normalImage + "); }"
        hover = "QComboBox:hover { background-image: url(" + self.hoverImage + "); }"
        selected = "QComboBox QAbstractItemView { background-image: url(" + self.selectedImage + "); }"

        if state == 'normal':
            return normal
        elif state == 'hover':
            return normal + hover
        elif state == 'selected':
            return normal + selected

在这里，我们为 normal、hover 和 selected 状态分别定义了样式表。

现在，我们需要为窗口中的鼠标事件添加信号插槽。首先，我们需要定义我们的 slot 函数：

    def onHover(self, event):

        if self.combo.underMouse():

            if not self.combo.hasFocus():
                self.combo.setStyleSheet(self.getStyle('hover'))

在这里，我们检查组合框是否处于鼠标悬停状态。如果是，则我们将组合框的样式表设置为 hover 状态下的样式表。

现在，我们需要在构造函数中为鼠标事件添加信号插槽：

        # 将鼠标悬停事件连接到我们的插槽
        self.combo.enterEvent = lambda event: self.onHover(event)
        self.combo.leaveEvent = lambda event: self.combo.setStyleSheet(self.getStyle('normal'))

在这里，我们将 enterEvent 信号连接到 onHover 函数，leaveEvent 信号连接到样式表为 normal 的样式表。

最后，我们需要在组合框选择更改时重新设置样式表：

    def onIndexChanged(self, index):
        self.combo.setStyleSheet(self.getStyle('selected'))

在这里，我们将组合框的样式表设置为 selected 状态下的样式表。

完整代码

import sys
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *


class ComboBoxBackgroundImage(QWidget):

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

        self.initUI()

        self.setMouseTracking(True)

    def initUI(self):

        # 设置窗口标题
        self.setWindowTitle('ComboBox Background Image')

        # 创建组合框，并将其放置在窗口中心
        self.combo = QComboBox(self)
        self.combo.addItem('Apple')
        self.combo.addItem('Banana')
        self.combo.addItem('Cherry')
        self.combo.addItem('Durian')
        self.combo.addItem('Elderberry')
        self.combo.move(50, 50)

        # 设置组合框的样式表
        self.combo.setStyleSheet(self.getStyle('normal'))

        # 将鼠标悬停事件连接到我们的插槽
        self.combo.enterEvent = lambda event: self.onHover(event)
        self.combo.leaveEvent = lambda event: self.combo.setStyleSheet(self.getStyle('normal'))

        # 将组合框选择更改信号连接到我们的插槽
        self.combo.currentIndexChanged.connect(self.onIndexChanged)

        self.setGeometry(300, 300, 400, 200)
        self.show()

    def getStyle(self, state):

        normal = "QComboBox { background-image: url(" + self.normalImage + "); }"
        hover = "QComboBox:hover { background-image: url(" + self.hoverImage + "); }"
        selected = "QComboBox QAbstractItemView { background-image: url(" + self.selectedImage + "); }"

        if state == 'normal':
            return normal
        elif state == 'hover':
            return normal + hover
        elif state == 'selected':
            return normal + selected

    def onHover(self, event):

        if self.combo.underMouse():

            if not self.combo.hasFocus():
                self.combo.setStyleSheet(self.getStyle('hover'))

    def onIndexChanged(self, index):

        self.combo.setStyleSheet(self.getStyle('selected'))


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

总结

在本例中，我们学习了如何使用 PyQt5 中的样式表为组合框添加背景图像。我们还学习了如何响应组合框上的鼠标事件，并通过更改样式表来改变组合框的外观。