什么是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@staticmethoddef 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_themeslist_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 qtawindow.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文件使用

如何使用QSS、QRC美化PySide6界面相关推荐

通过加载 QSS 文件的方式美化 QT 界面
通过加载 QSS 文件的方式美化 QT 界面 1 配置工程在进行配置之前,建议先在工程的根目录下新建一个 .qss 文件,方便后面的添加 1.打开目标工程,选中此工程,鼠标右键单击 Add New ...
使用Qt绘制一个简约美观的界面【使用QSS简单美化】（笔记）
文章目录使用Qt绘制一个简约美观的界面-使用QSS简单美化基本控件布局界面的简单美化 QSS 添加图片使用Qt绘制一个简约美观的界面-使用QSS简单美化基本控件布局以绘制登录界面为例,创建 ...
arch linux界面优化,ArchLinux美化之界面美化
ArchLinux美化之界面美化: Conky.BURG 主题图标: Numix--扁平化绚丽黑色调底部Docky: plank 安装: 查询相关的包:(先添加archlinuxcn源到/etc/p ...
Innosetup安装界面美化卸载界面美化
1.安装界面效果图: 2.卸载界面效果图: 3.资源详情下载资源包 innosetup安装界面美化.zip ┌─ app 包含exe的程序及依赖文件(本例子使用nwjs 27.5) │ ├─ dst ...
通过 InnoSetup 美化安装界面
在 github 仓库里的通过 InnoSetup 美化安装界面提供持续更新 InnoSetup 的美化相应的帖子也比较多,但是代码不是很全...所以我专门出了这篇文章来记录下这个美化过程. 废话 ...
【QT学习】QSS样式表实现界面换肤（图文详解+源码）
文章目录前言一.实现效果二.QSS简介及用法 1.什么是QSS? 2.怎么使用QSS? 三.QSS用法一:单个控件调用setStyleSheet函数四.QSS用法二:编写单个界面.qss文件的 ...
使用QSS美化PyQt5界面，分享4套超赞皮肤和QSS专用编辑器！
QSS 全称 Qt Style Sheets(Qt样式表),用于美化Qt程序界面,类似于CSS,但不如CSS强大,选择器和属性较少. 本文主要介绍在PyQt5中使用QSS,但同样适用于C++ Qt,P ...
php界面美化软件,界面美化
昨天开始一款软件的界面美化,遇到的问题与解决方法. 1,用JPG 文件做背景图片. 把JPG做为资源导入,从资源中加载,再显示出来. 看似非常简单却始终不成功.尝试使用3 种方法(gidplus.IP ...
qss 更改图标_qss 界面大全
在SiO2/Si界面存在有: 由于硅晶格周期性中断而产生的"快表面态"; 由于在界面处过量硅离子而产生的固定正界面电荷密度QSS前者可用适当工艺处理降低或消除,而后...... ...

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

什么是QSS与QRC

QRC如何使用？

QRC定义示例

编译QRC文件为python模块

在程序中引用资源文件

如何使用QSS

定义QSS示例

使用示例代码

如何编辑QSS

QSS 样式分享

Qt 官方例子

Qt-Material

使用示例

列出所有主题

PyDracula

PyOneDark

PyQt 图标库

QtAwesome

使用示例

参考

如何使用QSS、QRC美化PySide6界面相关推荐

最新文章

热门文章