00-QSS-Qt样式表.md

Qt Style Sheets 样式表

暂时偷了个懒，直接把我的博客 使用QSS美化PyQt5界面 - muzing的杂货铺 转载过来了，后面可能会更新QSS语法详解

QSS 全称 Qt Style Sheets（Qt样式表），用于美化Qt程序界面，类似于CSS，但不如CSS强大，只能简单美化。

官方文档

Customizing Qt Widgets Using Style Sheets

Qt Style Sheets Reference

官方参考文档才是最官方全面的文档，有时间最好仔细阅读一下。

主要包括：

• 可应用样式表的控件列表
• 属性列表
• 图标列表
• 属性值列表
• 伪类选择器列表
• 子控件控制列表

内容非常多，在此就不展开了。

基本语法

类似CSS，QSS每一条都是由一个选择器和一组声明构成：

选择器选出要对哪种控件进行样式修改，

每个声明都是键值对，键为属性，值为属性值

使用方式

为降低耦合，往往把QSS写在一个单独的style.qss文件中，然后在main.py的QApplication或QMainWindow中加载样式

编写QSS

新建一个扩展名为.qss的文件，如style.qss，编辑内容。（本文后面有完整的样式主题、QSS编辑器推荐）

把写好的.qss添加到qrc中

加载QSS

创建一个加载QSS样式表的公共类：

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()

在代码中加载qss样式表：

app = QApplication(sys.argv)
window = MainWindow()
 
style_file = './style.qss'
style_sheet = QSSLoader.read_qss_file(style_file)
window.setStyleSheet(style_sheet)

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

QSS 样式分享

Qt 官方例子

Qt Style Sheets Examples

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

Qt-Material

UN-GCPDS/qt-material

This is another stylesheet for PySide6, PySide2 and PyQt5, which looks like Material Design (close enough).

“一个仿Material的样式，适用于PySide6, PySide2以及PyQt5”

使用这套样式表也非常简单，作者已经打包发布到了pypi，所以我们只需要

pip install qt-material

安装，并在代码中import即可

# 使用例子
import sys
# from PySide6 import QtWidgets
# from PySide2 import QtWidgets
from PyQt5 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_()

更多详细内容请查阅该项目的README

QDarkStyleSheet

The most complete dark/light style sheet for Qt applications

“最完整的深色/浅色Qt主题”

• 文档

• GitHub

也可以通过pip直接安装使用

pip install qdarkstyle

# PyQt5 使用例子
import sys
import qdarkstyle
from PyQt5 import QtWidgets

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

# setup stylesheet
app.setStyleSheet(qdarkstyle.load_stylesheet_pyqt5())
# or in new API
app.setStyleSheet(qdarkstyle.load_stylesheet(qt_api='pyqt5'))

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

飞扬青云-QSS

在飞扬青云的 QWidgetDemo 项目中的 styledemo 子项目包含了3套很好看的QSS样式

QSS目录链接

QSS 编辑器

如果对上面推荐的这几个主题还不满意，你可以设计自己的QSS，下面推荐一些专用编辑器

QssStylesheetEditor

GitHub首页

中文README

QssStylesheetEditor 是一个功能强大的 Qt 样式表(QSS)编辑器，支持实时预览，自动提示，自定义变量, 支持预览自定义ui代码，引用QPalette等功能。

这个软件有如下特点：

• Qss代码高亮，代码折叠
• Qss代码自动提示，自动补全
• 实时预览 Qss 样式效果，可以预览几乎所有的 qtwidget 控件效果
• 支持预览自定义界面代码
• 支持在 Qss 中自定义变量
• 自定义变量可以在颜色对话框中拾取变量的颜色
• 支持通过颜色对话框改变QPalette，并在Qss中引用
• 支持相对路径引用图片，以及引用资源文件中的图片
• 支持切换不同的系统 theme，如 xp 主题，vista 主题等(不同 theme 下 qss 效果会略有差异)
• 能够在 windows，linux，unix 上运行
• 支持多国语言（目前已有中文，英文，俄文翻译）

还有许多强大而实用的功能，可以在README中查看

QSS Editor

🎨 Cross-platform application to edit and preview Qt style sheets (QSS).

跨平台的QSS编辑/预览应用

GitHub主页

GitHub realeases

下载地址2

Pycharm、VScode 插件

在Pycharm中可以安装 Qt Style Sheet Highlighter 插件，提供对QSS的代码高亮功能

在VScode里可以安装Qt for Python 插件，该插件不仅支持qss文件的代码高亮，还支持qml、qrc、pro等代码的高亮