1.介绍

QSS 全称 Qt Style Sheets(Qt样式表),用于美化Qt程序界面,类似于CSS,但不如CSS强大,选择器和属性较少,适用于C++ Qt,PyQt5,PySide6,PySide2项目

官方文档:
https://doc.qt.io/qt-5/stylesheet-reference.html
https://doc.qt.io/qt-5/stylesheet-customizing.html


qrc资源集合文件是用于指定被嵌入资源的XML文件。

基本语法:

<RCC>
    <qresource prefix="/demo">
        <file>qss/setting.qss</file>
    </qresource>
</RCC>

上述qrc文件根节点为 RCC ,里面可以包含若干qresource节点,每个qresource有自己的prefix(路径前缀)属性,qresource节点包含了若干file节点,描述了各个文件相对于.qrc的路径。

2.编译及使用

安装pyqt5的情况下,在对应环境终端内使用下述命令进行编译:

pyrcc5 -o src.py  src.qrc
# src.py 为生成的二进制描述文件  
# src.qrc 为我们写的 XML 资源文件

使用:

# 引入编译后文件
import src
# 使用路径:冒号+prefix路径前缀+file相对路径 ,引用qrc资源中文件
path = ":/demo/qss/setting.qss"

附:qrc编译脚本参考

import subprocess, os
 
images = os.listdir('./icons')
qss = os.listdir('./qss')
f = open('images.qrc', 'w+')
f.write(u'<!DOCTYPE RCC>\n<RCC version="1.0">\n<qresource>\n')
 
for item in images:
    f.write(u'<file alias="icons/'+ item +'">icons/'+ item +'</file>\n')
 
for item in qss:
    f.write(u'<file alias="qss/'+ item +'">qss/'+ item +'</file>\n')
 
f.write(u'</qresource>\n</RCC>')
f.close()
 
pipe = subprocess.Popen(r'pyrcc5 -o images.py images.qrc', stdout = subprocess.PIPE, stdin = subprocess.PIPE, stderr = subprocess.PIPE, creationflags=0x08)

3.项目演示

这里演示一种基于类MVC结构,使用qss对视图进行美化,并通过qrc进行资源管理的Pyqt5+qfluentwidgets示例:
目录结构:

src
|--resource
|  |--resource.qrc
|  |--qss
|     |--demo.qss
|--commons
|  |--style_sheet.py
|  |--resource.py
|--controllers
|  |--DemoController.py
|--views
|  |--DemoView.py
|--models
|  |--DemoModels.py
|--main.py

resource.qrc

<RCC>
    <qresource prefix="/demo">
        <file>qss/demo.qss</file>
    </qresource>
</RCC>

demo.qss

QLabel#demoLabel {
    font: 33px 'Microsoft YaHei Light';
    background-color: transparent;
}

style_sheet.py

from enum import Enum
from qfluentwidgets import StyleSheetBase, Theme

import commons.resource


class StyleSheet(StyleSheetBase, Enum):
    """ Style sheet  """

    DEMO_INTERFACE = "demo"

    def path(self, theme=Theme.AUTO):
        return f":/demo/qss/{self.value}.qss"

DemoView.py

"""
@File: SettingControllers.py
@Description: 
@Author: 
"""
from commons.style_sheet import StyleSheet
from qfluentwidgets import ScrollArea
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QLabel


class DemoView(ScrollArea):

    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setObjectName('demo')

        self.demoLabel = QLabel(self.tr("demo"), self)
        self.__initWidget()

    def __initWidget(self):
        self.resize(1000, 800)
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setViewportMargins(0, 80, 0, 20)
        self.setWidget(self.scrollWidget)
        self.setWidgetResizable(True)
        self.setObjectName('demo')

        # initialize style sheet
        self.settingLabel.setObjectName('settingLabel')
        StyleSheet.DEMO_INTERFACE.apply(self)

        # initialize layout
        self.__initLayout()
        self.__connectSignalToSlot()

    def __initLayout(self):
        self.settingLabel.move(36, 30)