博客

PyQt5 – 悬停时为复选框设置背景图片

  • Post category:Python

若想为 PyQt5 的复选框设置背景图片，可以使用 QCheckBox 的 styleSheet 方法来实现，具体步骤如下：

  1. 为复选框设置样式表

使用样式表来设置复选框的显示风格和布局，其中要设置背景图片的属性为 background-image。可以使用相对路径或绝对路径来指定图片位置。

checkbox.setStyleSheet("""
    QCheckBox:hover { background-image: url(hover.png); }
    QCheckBox:checked { background-image: url(checked.png); }
    QCheckBox { background-image: url(normal.png); }
""")

上述样式表会在复选框的三种状态下设置不同的背景图像：

  • 在鼠标悬停时，复选框显示的背景图像为 hover.png；
  • 在选中状态时，复选框显示的背景图像为 checked.png；

  • 在普通状态下，复选框显示的背景图像为 normal.png。

  • 完整示例1：为多个复选框设置不同的背景图像

下面是一个完整的示例代码，创建了多个复选框，并分别设置不同的背景图片和提示信息：

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

class Example(QWidget):

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

    def initUI(self):

        vbox = QVBoxLayout()
        self.setLayout(vbox)

        # 创建多个复选框，并分别设置不同的样式表和提示信息
        checkbox1 = QCheckBox('Option 1', self)
        checkbox1.setStyleSheet("""
            QCheckBox:hover { background-image: url(hover1.png); }
            QCheckBox:checked { background-image: url(checked1.png); }
            QCheckBox { background-image: url(normal1.png); }
        """)
        checkbox1.setToolTip('This is option 1')

        checkbox2 = QCheckBox('Option 2', self)
        checkbox2.setStyleSheet("""
            QCheckBox:hover { background-image: url(hover2.png); }
            QCheckBox:checked { background-image: url(checked2.png); }
            QCheckBox { background-image: url(normal2.png); }
        """)
        checkbox2.setToolTip('This is option 2')

        vbox.addWidget(checkbox1)
        vbox.addWidget(checkbox2)

        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('Set background image for checkbox')
        self.show()

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

在该示例中，创建了两个复选框，分别设置了不同的样式表和提示信息。图片文件需要放在与程序同一路径下，否则需要使用绝对路径进行指定。

  1. 完整示例2：为复选框设置单个背景图像

如果只需要为复选框设置单个背景图像，则可以把普通状态下的图片作为默认背景，然后在选中状态和悬停状态下通过样式表来修改颜色、阴影等属性，实现不同状态下的样式效果。

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

class Example(QWidget):

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

    def initUI(self):

        vbox = QVBoxLayout()
        self.setLayout(vbox)

        # 创建一个复选框，并设置样式表
        checkbox = QCheckBox('Option', self)
        checkbox.setStyleSheet("""
            QCheckBox { background-image: url(checkbox.png); }
            QCheckBox:checked { color: #ffffff; text-shadow: 1px 1px 1px #333; }
            QCheckBox:hover { color: #333; }
        """)
        checkbox.setToolTip('This is option')

        vbox.addWidget(checkbox)

        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('Set background image for checkbox')
        self.show()

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

在上述示例中，设置了一个名为 checkbox.png 的图片为复选框的默认背景图像，并在选中状态下通过样式表设置了文字的颜色和阴影效果，悬停时则只改变了文字颜色。

注意事项：

  • 图片文件需要与程序在同一路径下；
  • 在使用相对路径指定图片时，需要将路径字符串放在一对双引号中；
  • 最好在其他样式表之前先设置 QCheckBox 的背景图像属性，以防被其他样式表覆盖。
Tags: