博客

PyQt5 – 从未选中的复选框为已按下的指示器设置背景图片

  • Post category:Python

为未选中的复选框设置背景图片属于定制化风格的一种表现方式，可以借助PyQt5中的样式表来实现。下面将为您详细讲解如何实现该功能：

步骤一：导入PyQt5

在使用PyQt5之前需要先导入它。通常的方法是使用以下指令：

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

步骤二：创建基础窗口和复选框控件

我们先创建一个pygame游戏窗口，再在窗口上创建复选框控件：

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

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.checkbox = QCheckBox("未选中")
        layout = QVBoxLayout()
        layout.addWidget(self.checkbox)
        self.setLayout(layout)

步骤三：设置样式表中的背景图片

在样式表中使用“background-image”属性可以设置控件的背景图片，这个属性可以接受一个URL链接、相对路径或者直接使用内嵌数据的方式。下面我们使用相对路径的方式来设置背景图片：

    def set_checkbox_style(self):
        self.setStyleSheet('''
        QCheckBox{
            spacing: 5px;
            background-color: rgb(200,200,200);
            color: rgb(0,0,0);
            font-size: 18px;
            height: 30px;
            width: 120px;
            border: 1px solid gray;
            border-radius: 5px;
            padding-left: 30px;
            background-position: center;
            background-repeat: no-repeat;
            }
        QCheckBox::indicator:unchecked {
            image: url(res/checkbox-unchecked.png);
        }
        QCheckBox::indicator:checked {
            image: url(res/checkbox-checked.png);
        }''')

在样式表中我们设置了QCheckBox的样式，并设置QCheckBox::indicator:unchecked和QCheckBox::indicator:checked伪元素来分别设置复选框未选中和选中的状态。其中，使用了image属性来指定复选框的背景图片，我们在这里依旧是使用相对路径。

步骤四：完整代码演示

下面提供完整代码示例来帮助您更好地了解如何实现：

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

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.checkbox = QCheckBox("未选中")
        layout = QVBoxLayout()
        layout.addWidget(self.checkbox)
        self.setLayout(layout)
        self.set_checkbox_style()

    def set_checkbox_style(self):
        self.setStyleSheet('''
        QCheckBox{
            spacing: 5px;
            background-color: rgb(200,200,200);
            color: rgb(0,0,0);
            font-size: 18px;
            height: 30px;
            width: 120px;
            border: 1px solid gray;
            border-radius: 5px;
            padding-left: 30px;
            background-position: center;
            background-repeat: no-repeat;
            }
        QCheckBox::indicator:unchecked {
            image: url(res/checkbox-unchecked.png);
        }
        QCheckBox::indicator:checked {
            image: url(res/checkbox-checked.png);
        }''')

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MyWindow()
    window.show()
    sys.exit(app.exec_())

需要注意的是，在使用样式表的时候，应将图片放在资源文件夹即“res”文件夹中，注意路径的书写方式。

示例1：使用外部连接图片设置背景

我们将步骤三中的路径换成一个网络上的图片地址，如下：

    def set_checkbox_style(self):
        self.setStyleSheet('''
        QCheckBox{
            spacing: 5px;
            background-color: rgb(200,200,200);
            color: rgb(0,0,0);
            font-size: 18px;
            height: 30px;
            width: 120px;
            border: 1px solid gray;
            border-radius: 5px;
            padding-left: 30px;
            background-position: center;
            background-repeat: no-repeat;
            }
        QCheckBox::indicator:unchecked {
            image: url(https://www.example.com/checkbox-unchecked.png);
        }
        QCheckBox::indicator:checked {
            image: url(https://www.example.com/checkbox-checked.png);
        }''')

示例2：使用内置数据设置背景

直接使用外部资源很容易受到网络环境、版权等因素的影响，而使用内置数据可以解决这些问题：

    def set_checkbox_style(self):
        unchecked_png = b'iVBORw0K....AAElFTkSuQmCC' # 未选中状态的数据uri编码
        checked_png = b'....' # 选中状态的数据uri编码
        self.setStyleSheet(f'''
        QCheckBox{{
            image: url(data:image/png;base64,{unchecked_png.decode()}); /* 未选中状态 */
            padding-left: 16px;
        }}
        QCheckBox:checked{{
            image: url(data:image/png;base64,{checked_png.decode()}); /* 选中状态 */
            padding-left: 16px;
        }}
        ''')

这样使用内置数据，样式表中就不会涉及到文件的操作，而是在初始化中打成一个base64的字符串，这就保证了程序的可移植性和可靠性。

Tags: