如何使用QSS、QRC美化PySide6界面

什么是QSS与QRC

QRC: 与应用程序关联的资源以 .qrc 文件指定，.qrc 文件是一种基于 XML 的文件格式，该文件格式列出了磁盘上的文件，并可以选择为它们分配一个资源名称，应用程序必须使用该资源名称来访问该资源。
QSS: 全称 Qt Style Sheets（Qt样式表），用于美化Qt程序界面，类似于CSS，但不如CSS强大，选择器和属性较少。

本文主要介绍在PySide6中使用QSS与QRC：介绍QRC的定义和使用、QSS的定义和使用、分享样式和样式编辑器。QSS与QRC本身的语法详解请参考官方文档和其他教程。

注意： QSS中引用的资源文件必须先在QRC中进行定义。

QRC如何使用？

qrc是一种基于XML格式的资源定义文件

• 应用使用的资源文件在扩展名为qrc的文件中声明。
• qrc文件中声明的资源文件是应用源代码的一部分，其中的文件路径是相对于qrc文件所在目录的相对路径。因此qrc中声明的资源文件必须和qrc文件处于同一目录或者是该目录的子目录。

资源文件可以直接随源代码编译到应用可执行文件中，在代码中直接调用，也可以先创建资源文件然后使用代码注册到资源系统中。

QRC定义示例

• 路径前缀： 使用路径前缀可以将不同目录下的文件组合到一个命名空间中，便于在不移动文件的前提下，以统一的路径前缀访问不同路径下文件，相当于对文件做了虚拟分类。
• 别名：简化资源文件的访问方式
• file添加prefix前缀时，文件引用方式是:/前缀/文件相对于qrc文件路径

<!DOCTYPE RCC>
<RCC version="1.0">
  <qresource prefix="/resource">
    <file alias="arrow-icon">resource/arrow.png</file>
    <file alias="click-icon">resource/click.png</file>
    <file alias="weather-icon">resource/weather-icon.png</file>
    <file alias="weather-bg">resource/weather.png</file>
  </qresource>
</RCC>

编译QRC文件为python模块

选择qrc文件，右键打开PyRCC External Tool，将qrc文件转化为python文件，如将my.qrc转化为my_rc.py
运行脚本是:D:\program\Anaconda3\Lib\site-packages\PySide6\rcc -g python my.qrc -o my_rc.py

打开my_rc.py文件，此类包含:

• 三个二进制编码的字符串：
  • qt_resource_data：qrc源码，其中还包含了矢量图标的svg代码。
  • qt_resource_name：资源名称；
  • qt_resource_struct：资源二进制文件结构；
• 两个Python函数：
  • qInitResources：初始化资源，调用了qRegisterResourceData方法在应用中注册资源。
  • qCleanupResources：清除资源，调用了qUnregisterResourceData方法在应用中卸载资源。

在程序中引用资源文件

**注意：**程序中引用的资源文件路径 与 在qrc文件中路径的访问方式一致。

import my_rc as res

# 设置图标
window.setWindowIcon(QPixmap(":/resource/weather-icon"))
#设置背景图
window.setStyleSheet(u"background-image: url(:/resource/weather-bg);")

实际效果如下：

如何使用QSS

• 创建一个加载QSS样式表的公共类QSSLoader
• 在代码中使用QSSLoader加载QSS

注意：如果在QSS中引用了资源文件，则必须在代码中导致资源文件类，如import my_rc as res

定义QSS示例

注意：qss中引入的资源文件如url(:/resource/weather-bg) 已经在QRC文件中进行了定义。

QMainWindow {
    background-image: url(:/resource/weather-bg);
}
QPushButton {
     qproperty-icon: url(:/resource/click-icon);
}
QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton#evilButton:pressed {
    background-color: rgb(224, 0, 0);
    border-style: inset;
}

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

QComboBox:hover{
    background-color:cyan;
}

QComboBox:on { /* shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;

    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a single line */
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}

QComboBox::down-arrow {
     image: url(:/resource/arrow-icon);
 }

使用示例代码

class QSSLoader:
    def __init__(self):
        pass

    @staticmethod
    def read_qss_file(qss_file_name):
        with open(qss_file_name, 'r',  encoding='UTF-8') as file:
            return file.read()

import my_rc as res
if __name__ == '__main__':
    app = QApplication(sys.argv)

    window = MainWindow()
    window.setGeometry(150, 150, 360, 398)
    window.setWindowTitle("QT 简单示例教程")

    style_file = './style.qss'
    style_sheet = QSSLoader.read_qss_file(style_file)
    window.setStyleSheet(style_sheet)

    window.show()
    sys.exit(app.exec())

运行效果如下：

如何编辑QSS

在PyCharm中，可以通过Qt Style Sheet Highlighter 插件查看和编辑qss

QSS 样式分享

Qt 官方例子

Qt Style Sheets Examples
Qt官方给出的一些小例子，不一定好看但有很强的学习参考性

Qt-Material

详细使用请参见官网:qt-material

使用示例

import sys
from PySide6 import QtWidgets
from qt_material import apply_stylesheet

# create the application and the main window
app = QtWidgets.QApplication(sys.argv)
window = QtWidgets.QMainWindow()

# setup stylesheet
apply_stylesheet(app, theme='dark_teal.xml')

# run
window.show()
app.exec_()

列出所有主题

from qt_material import list_themes

list_themes()

PyDracula

Modern_GUI_PyDracula_PySide6_or_PyQt6
注意！ 此项目对应 PySide6 / PyQt6 ，而不是 PyQt5

PyOneDark

PyOneDark_Qt_Widgets_Modern_GUI
和上面的 PyDracula 是同一作者
同样是对应 PySide6 的

PyQt 图标库

QtAwesome

使用详见QtAwesome

• 打开内置的Icon Browser

from qtawesome import icon_browser
icon_browser.run()

使用示例

	import qtawesome as qta
   window.ui.clearBtn.setIcon(qta.icon('mdi.cursor-default-click-outline', color='blue'))
   window.ui.searchBtn.setIcon(qta.icon('mdi.cursor-default-click-outline', color='blue'))
   window.setWindowIcon(qta.icon('fa.cloud-download', color='blue'))

参考

使用QSS美化PyQt界面，分享6套超赞皮肤
qt-material 官网
QtAwesome
Qt 资源系统和qrc文件使用