PyQt5 - 将皮肤设置为单选按钮的指示器

在PyQt5中使用QSS可以为界面提供自定义样式。本篇文章将介绍如何将皮肤设置为单选按钮的指示器。

准备工作

首先，我们需要准备以下的静态文件：

• bg.png：作为单选按钮指示器的背景图
• light.png：作为单选按钮勾选时的图片
• dark.png：作为单选按钮未勾选时的图片

将以上文件保存到任意一个文件夹内。

创建简单的界面

在PyQt5中创建简单的界面十分容易，直接使用QMainWindow即可。在该窗口中，我们添加三个单选按钮，并添加一个用于调整皮肤的下拉列表（QComboBox）。

import sys
from PyQt5 import QtWidgets

class Example(QtWidgets.QMainWindow):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
    
    def initUI(self):
        
        # 设置窗口标题
        self.setWindowTitle('PyQt5 - Skin Setting')
        
        # 设置窗口大小
        self.setFixedSize(300, 200)
        
        # 创建单选按钮
        self.rb_light = QtWidgets.QRadioButton('Light Skin', self)
        self.rb_light.move(50, 50)
        self.rb_dark = QtWidgets.QRadioButton('Dark Skin', self)
        self.rb_dark.move(50, 80)
        self.rb_blue = QtWidgets.QRadioButton('Blue Skin', self)
        self.rb_blue.move(50, 110)
        
        # 创建下拉列表
        self.cb_skin = QtWidgets.QComboBox(self)
        self.cb_skin.addItems(['Default', 'Light', 'Dark', 'Blue'])
        self.cb_skin.move(150, 150)
        
        # 显示窗口
        self.show()

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

上述代码创建了三个单选按钮和一个下拉列表，分别用于选择皮肤。

使用QSS设置样式

接下来，我们需要使用QSS来设置单选按钮的样式。首先，我们设置单选按钮的样式。这里我们使用QPixmap来设置背景和前景图片，并使用样式表中的伪类选择器设置单选钮选中时的勾的样式。

rb_qss = '''
QRadioButton {{
    background-image: url({bg_url});
    border: none;
    border-radius: 7px;
    width: 14px;
    height: 14px;
}}

QRadioButton::indicator {{
    image: url({light_url});
}}

QRadioButton:checked::indicator {{
    image: url({dark_url});
}}
'''

self.rb_light.setStyleSheet(rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='dark.png'))

然后，我们在下拉列表中给出每个皮肤的QSS。

skin_qss = {
        'Default': '',
        'Light': rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='dark.png'),
        'Dark': rb_qss.format(bg_url='bg.png', light_url='dark.png', dark_url='light.png'),
        'Blue': rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='light.png')
    }

最后，我们在下拉列表中设置当前使用的皮肤即可。

self.cb_skin.setStyleSheet(skin_qss[self.cb_skin.currentText()])
self.cb_skin.currentIndexChanged.connect(lambda: self.cb_skin.setStyleSheet(skin_qss[self.cb_skin.currentText()]))

完整代码如下：

import sys
from PyQt5 import QtWidgets

class Example(QtWidgets.QMainWindow):
    
    def __init__(self):
        super().__init__()
        
        self.initUI()
    
    def initUI(self):
        
        self.setWindowTitle('PyQt5 - Skin Setting')
        self.setFixedSize(300, 200)
        
        # 创建样式
        rb_qss = '''
        QRadioButton {{
            background-image: url({bg_url});
            border: none;
            border-radius: 7px;
            width: 14px;
            height: 14px;
        }}
        
        QRadioButton::indicator {{
            image: url({light_url});
        }}
        
        QRadioButton:checked::indicator {{
            image: url({dark_url});
        }}
        '''
        
        # 创建单选按钮
        self.rb_light = QtWidgets.QRadioButton('Light Skin', self)
        self.rb_light.move(50, 50)
        self.rb_light.setStyleSheet(rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='dark.png'))
        self.rb_dark = QtWidgets.QRadioButton('Dark Skin', self)
        self.rb_dark.move(50, 80)
        self.rb_dark.setStyleSheet(rb_qss.format(bg_url='bg.png', light_url='dark.png', dark_url='light.png'))
        self.rb_blue = QtWidgets.QRadioButton('Blue Skin', self)
        self.rb_blue.move(50, 110)
        self.rb_blue.setStyleSheet(rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='light.png'))
        
        # 创建下拉列表
        self.cb_skin = QtWidgets.QComboBox(self)
        self.cb_skin.addItems(['Default', 'Light', 'Dark', 'Blue'])
        self.cb_skin.move(150, 150)
        skin_qss = {
            'Default': '',
            'Light': rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='dark.png'),
            'Dark': rb_qss.format(bg_url='bg.png', light_url='dark.png', dark_url='light.png'),
            'Blue': rb_qss.format(bg_url='bg.png', light_url='light.png', dark_url='light.png')
        }
        self.cb_skin.setStyleSheet(skin_qss[self.cb_skin.currentText()])
        self.cb_skin.currentIndexChanged.connect(lambda: self.cb_skin.setStyleSheet(skin_qss[self.cb_skin.currentText()]))
        
        self.show()

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

最终效果如下图所示：