PyQt5 - 复选框中指示器的凹槽边框

在PyQt5中，复选框（QCheckBox）是常见的用户界面组件。默认情况下，复选框的指示器（indicator）是一个简单的方框，如果选中则内部填充一个小圆点。但是，使用样式表（stylesheet），我们可以对复选框中指示器的外观进行自定义。本文将介绍如何在PyQt5中为复选框指示器添加一个凹槽边框。

步骤

要将复选框中指示器的外观自定义为带有凹槽边框的，我们可以使用QSS（Qt样式表）和伪状态（pseudo-states）。以下是实现该效果的基本步骤：

1. 设置QCheckBox的QSS样式表，使用伪状态设置指示器的边框和背景色
2. 创建凹槽背景图像
3. 使用伪状态设置指示器的背景图像
4. 设置伪状态的大小、位置和 decoration

设置QSS样式表

在设置QSS样式表时，我们将使用伪状态来指示选中和非选中状态。如下所示：

    QCheckBox::indicator {
        border: 2px solid;
        border-radius: 5px;
    }
    
    QCheckBox::indicator:checked {
        border-color: #0078d7;
        background-color: #0078d7;
    }

上面的代码设置了指示器的边框和边框的圆角度数。在选中状态下，边框的颜色和背景颜色都设置为蓝色。

创建凹槽背景图像

我们需要一个凹槽背景图像，以便为指示器添加凹槽效果。可以使用任何图像编辑器创建此图像。为了实现凹槽效果，我们需要使用淡灰色的底色和黑色的边框。以下是示例图像：

使用伪状态设置指示器的背景图像

在QSS样式表中添加以下代码，将图像应用于指示器的背景：

    QCheckBox::indicator:unchecked {
        background-image: url(groove.png);
    }

这将使未选中状态的指示器显示为一个带有凹槽边框的图像。

设置伪状态的大小、位置和 decoration

我们需要设置伪状态的大小、位置和 decoration 以使图像正确显示。以下是示例代码：

    QCheckBox::indicator:unchecked {
        ...
        width: 20px;
        height: 20px;
        ...
        subcontrol-position: left;
        subcontrol-origin: padding;
        ...
    }

在这个例子中，width 和 height 设置伪状态的大小。 subcontrol-position 和 subcontrol-origin 控制伪状态在 QCheckBox 控件中的位置。

示例代码

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QCheckBox
from PyQt5.QtGui import QPixmap


class Example(QWidget):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
        
        
    def initUI(self):
        
        # 创建一个复选框
        cb = QCheckBox('Checkbox', self)
        cb.move(20, 20)
        
        # 设置QSS样式表
        cb.setStyleSheet('''
            QCheckBox::indicator {
                border: 2px solid;
                border-radius: 5px;
            }
            
            QCheckBox::indicator:checked {
                border-color: #0078d7;
                background-color: #0078d7;
            }
            
            QCheckBox::indicator:unchecked {
                background-image: url(groove.png);
                width: 20px;
                height: 20px;
                subcontrol-position: left;
                subcontrol-origin: padding;
            }
        ''')
 
        # 显示界面
        self.setGeometry(300, 300, 250, 150)
        self.setWindowTitle('Checkbox with groove border')
        self.show()
        
        
if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

该程序可以创建一个带有凹槽边框的复选框。需要确保脚本文件存放在带有索赔图像的相同目录中，否则需要修改图像的路径。