使用QSS美化PyQt界面

本文最后更新于 2023年11月16日凌晨

QSS 全称 Qt Style Sheets（Qt样式表），用于美化 Qt 程序界面，类似于 CSS，但不如 CSS 强大，选择器和属性较少。

本文介绍在 PyQt5 中使用 QSS，但同样适用于 PyQt6、PySide6、PySide2 等。

本文主要介绍 QSS 的加载使用以及分享，QSS 本身的语法详解请参考官方文档和其他教程。

官方文档

Customizing Qt Widgets Using Style Sheets

Qt Style Sheets Reference

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

主要包括：

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

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

基本语法

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

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

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

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，所以我们只需要

1	`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

qtmodern

GitHub 首页

qtmodern

该库也已经添加至 PyPI，可以通过 pip 安装使用：

1	`pip install qtmodern`

import qtmodern.styles
import qtmodern.windows

...

app = QApplication()
win = YourWindow()

qtmodern.styles.dark(app)
mw = qtmodern.windows.ModernWindow(win)
mw.show()

...

PyDracula

GitHub 首页

YouTube 演示与教程

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

PyDracula 深色主题

PyDracula 浅色主题

一个现代化的 GUI ，对高 DPI 有更好支持：

Qt Widgets 是一项老技术，对高 DPI 设置没有很好的支持，当您的系统应用 DPI 高于 100% 时，这些图像看起来会失真。通过在 Qt 模块导入正下方的“main.py”中应用以下代码，您可以使用一种变通方法来最小化此问题。

# ADJUST QT FONT DPI FOR HIGHT SCALE
# ////////////////////////////////////
from modules import *
from widgets import *
os.environ["QT_FONT_DPI"] = "96"

PyOneDark

GitHub 首页

YouTube 展示视频

和上面的 PyDracula 是同一作者

同样是对应 PySide6 的

PyOneDark

该作者还有一个 Simple_PySide_Base 的仓库，对 PySide2 或 PyQt5 初学者如何创建一个美观的 GUI 程序是不错的参考

PyQtDarkTheme

GitHub 首页

扁平风格的深色/浅色主题
支持 PySide 与 PyQt
支持 PyInstaller
解决了 Qt 版本间的风格差异
深色和浅色主题的 QPalette

PyQtDarkTheme-深色主题

PyQtDarkTheme-浅色主题

此主题的详细使用方法请参考文档

飞扬青云-QSS

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

PS黑色

浅蓝色

扁平化白色

QSS目录链接

QDarkStyleSheet

The most complete dark/light style sheet for Qt applications

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

containers_no_tabs_buttons

containers_no_tabs_buttons1

containers_tabs_displays

widgets_inputs_fields1

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

1	`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_()

GTRONICK-QSS

GTRONICK/QSS: QT Style Sheets templates

一组QSS样式

Ubuntu

MaterialDark

ElegantDark

Aqua

AMOLED

PyQt 图标库

QtAwesome

GitHub 主页

QtAwesome enables iconic fonts such as Font Awesome and Elusive Icons in PyQt and PySide applications.

It started as a Python port of the QtAwesome C++ library by Rick Blommers.

可以通过 conda 或者 pip 安装