组件官网:QFluentWidgets – 在设计师中拖拖拽拽,无需书写 QSS,即可快速构建美观的界面

组件介绍
QFluentWidgets 是一个 Qt 组件库,提供了许多更加现代化风格的组件来让你的 Qt 程序界面更加美观,实际上是 Windows 11 的 Fluent Design 风格。
同时支持浅色和深色主题的切换,并且可以做到自动切换与手动切换。
并且内置了 Windows 11 风格的设置卡片,设置的读写都做到了自动化。
快速开始
以一个新项目为例,下面展示如何快速使用该组件库书写一个现代化的程序界面框架。我们默认你已经配置好了 PyCharm Community 并且安装好了项目专用的虚拟环境。
![图片[2]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211165613720-image.png)
安装
QFluentWidgets 支持 Qt 与 PyQt/PySide,在 Python 中总共有四个分支,分别是 PyQt5/6 与 PySide2/6。
以 PySide6 分支为例,其他分支的安装方法傻瓜一般类似:在 PyCharm Community 中添加清华镜像源的 pypi 并且安装 PySide6,然后搜索安装PySide6-Fluent-Widgets
,即可实现安装。
如果使用命令行的话,就是下面的两行命令:
pip install PySide6 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install PySide6-Fluent-Widgets -i https://pypi.tuna.tsinghua.edu.cn/simple
使用镜像源的意义在于加速下载,否则对于 PySide 这种程度的包,几乎必然下载失败。
然后,从 Github 上下载一个 Gallery,这里可以可视化查找组件库内置的矢量图标,并且预览各组件的效果。
![图片[3]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211162421498-image.png)
请注意,我们的目标是上图中的前两个之一。Pro 组件库是需要购买商用许可证才可使用的,Material 组件库是另外一个拟物化风格的组件库,但是食用方法几乎一致。
然后,仍然从这个页面下载 Fluent Designer。
![图片[4]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211163228187-image.png)
添加外部工具以快速启用 Designer,PySide6-uic 与 Gallery
将 Gallery 和 Fluent Designer 中的程序完整解压到一个安全的地方,然后我们需要添加三个外部工具来方便开发过程中快速调用。
![图片[5]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211162845240-image.png)
转到上面的外部工具设置页,点击➕,然后依次添加三个工具。
Gallery
![图片[6]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211163003841-image.png)
程序指向你的 Gallery 所在地,工作目录应当会自动设置。
设置完毕后,在 Pycharm 中的大部分地方单击鼠标右键,在外部工具中选择该工具,将会调出 Gallery。
![图片[7]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211164305497-image.png)
Fluent Designer
![图片[8]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211163317394-image.png)
同样。
这里添加的是一个安装了插件的 Designer,可以直接使用 QFluentWidgets 组件进行设计。PySide6 自带的 Designer 只能使用 Qt 默认的组件。
设置完毕后,在 Pycharm 中的大部分地方单击鼠标右键,在外部工具中选择该工具,将会调出 Fluent Designer。
PySide6 UIC
![图片[9]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211163344827-image.png)
你可能需要查找一下这个程序的位置,它是 PySide6 自带的一个脚本,用于配合 Designer 食用。
- 对于 Virtualenv 环境,请在 PyCharm 项目根目录下的环境 Python 文件夹中的 Scripts 目录下搜索;
- 对于 Conda 环境,请在
你的Windows用户文件夹/.conda/envs/
目录下寻找你的环境 Python 文件夹,再在 Scripts 目录下搜索。
然后,将实参设置为$FileName$ -o $FileNameWithoutExtension$.py
,工作目录设置为$FileDir$
。
现在,在 Pycharm 页面上的项目目录中右键选中一个 ui 文件,选择外部工具中的此工具,选中的 ui 文件将被投喂给这个脚本,然后在同目录下生成一个 py 文件,这就是我们需要的东西。
编写基本代码
![图片[10]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域](https://ifanspace.top/wp-content/uploads/2024/02/20240211164631987-image.png)
假设你已经使用 Designer 随便写好了一个页面,并且转换成了一个 py 文件,直接运行该 py 文件无事发生,你要怎么启动这个程序?
答案是,写一段基本代码。例如说在你的 main.py
中 import
这个 py 文件,你可以如下编码:
from Main_Window import Ui_Main_Window # 这个要看你在 Designer 中编写 ui 时是否有命名,不确定的话可以依靠 Pycharm 的自动补全来写
from PySide6.QtWidgets import QWidget # 你在 Designer 中新建的窗口类型是 QWidget 还是 QMainWindow?是哪个就导入哪个即可
from PySide6.QtWidgets import QApplication # 必须导入,没什么好说的
import sys
class Window(QWidget): # 括号里填入你导入的那个
def __init__(self):
super(Window, self).__init__()
self.ui = Ui_Main_Window() # 等号后面填入你编写的那个
self.ui.setupUi(self)
if __name__ == "__main__":
app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec())
这样,你的程序雏形就能通过这个 main.py
入口启动了。
请登录后查看评论内容