让PyQt/PySide如Win11一样优雅:QFluentWidgets

让PyQt/PySide如Win11一样优雅:QFluentWidgets

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

20240211155721432-image

组件介绍

QFluentWidgets 是一个 Qt 组件库,提供了许多更加现代化风格的组件来让你的 Qt 程序界面更加美观,实际上是 Windows 11 的 Fluent Design 风格。

同时支持浅色和深色主题的切换,并且可以做到自动切换与手动切换。

并且内置了 Windows 11 风格的设置卡片,设置的读写都做到了自动化。

快速开始

以一个新项目为例,下面展示如何快速使用该组件库书写一个现代化的程序界面框架。我们默认你已经配置好了 PyCharm Community 并且安装好了项目专用的虚拟环境。

20240211160301884-image

安装

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-帆域

请注意,我们的目标是上图中的前两个之一。Pro 组件库是需要购买商用许可证才可使用的,Material 组件库是另外一个拟物化风格的组件库,但是食用方法几乎一致。

然后,仍然从这个页面下载 Fluent Designer。

图片[4]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

添加外部工具以快速启用 Designer,PySide6-uic 与 Gallery

将 Gallery 和 Fluent Designer 中的程序完整解压到一个安全的地方,然后我们需要添加三个外部工具来方便开发过程中快速调用。

图片[5]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

转到上面的外部工具设置页,点击➕,然后依次添加三个工具。

Gallery

图片[6]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

程序指向你的 Gallery 所在地,工作目录应当会自动设置。

设置完毕后,在 Pycharm 中的大部分地方单击鼠标右键,在外部工具中选择该工具,将会调出 Gallery。

图片[7]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

Fluent Designer

图片[8]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

同样。

这里添加的是一个安装了插件的 Designer,可以直接使用 QFluentWidgets 组件进行设计。PySide6 自带的 Designer 只能使用 Qt 默认的组件。

设置完毕后,在 Pycharm 中的大部分地方单击鼠标右键,在外部工具中选择该工具,将会调出 Fluent Designer。

PySide6 UIC

图片[9]-让PyQt/PySide如Win11一样优雅:QFluentWidgets-帆域

你可能需要查找一下这个程序的位置,它是 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-帆域

假设你已经使用 Designer 随便写好了一个页面,并且转换成了一个 py 文件,直接运行该 py 文件无事发生,你要怎么启动这个程序?

答案是,写一段基本代码。例如说在你的 main.pyimport 这个 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 入口启动了。

© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容