使用QSS美化PyQt界面

本文最后更新于:2022年7月22日 上午

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.pyQApplicationQMainWindow 中加载样式

编写QSS

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

把写好的 .qss 添加到 qrc

加载QSS

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

1
2
3
4
5
6
7
8
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样式表:

1
2
3
4
5
6
7
8
9
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即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 使用例子
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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”中应用以下代码,您可以使用一种变通方法来最小化此问题。

1
2
3
4
5
# 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 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 安装

1
conda install qtawesome
1
pip install qtawesome

QtAwesome 截图

QtAwesome 还附带一个图标浏览器,可以显示所有可用的图标。你可以使用它来搜索适合需求的图标,然后复制应该用于创建该图标的名称到代码中以应用图标

QtAwesome 图标浏览器

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

qsseditor-1

qsseditor-2

Pycharm、VScode 插件

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

Qt Style Sheet Highlighter

Qt Style Sheet Highlighter 演示

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

Qt for Python


使用QSS美化PyQt界面
https://muzing.top/posts/28a1d80f/
作者
muzing
发布于
2021年7月15日
更新于
2022年7月22日
许可协议