使用QT Designer设计出更符合现代Window系统的软件界面

QT Designer PyQt-Fluent-Widgets

发布日期: 2023-10-19

更新日期: 2023-10-19

文章字数: 910

阅读时长: 3 分

阅读次数:

使用QT Designer设计出更符合现代Window系统的软件界面

一、Fluent UI 简介

Fluent UI（以前称为Office UI Fabric）是一个由Microsoft开发的开源设计系统和UI库，旨在帮助开发者构建现代、易于使用和一致的用户界面。它提供了一套通用的UI组件和设计准则，以帮助开发者构建在各种Microsoft平台上运行的应用程序，如Windows、Microsoft 365和Azure。

这就意味着，如果想要设计出符合现代window审美的软件界面，就必须采用Fluent UI进行开发。

在QT开发领域，有许多基于Fluent UI的开发组件库，这些组件库基于 QT 实现，可以在pyqt5、pyqt6、pyside6中很方便的调用。

二、基于 Qt 的 Fluent UI 开发工具

1、PyQt-Fluent-Widgets

1.1 简介

PyQt-Fluent-Widgets 官方网址为 QFluentWidgets - 在设计师中拖拖拽拽，无需书写 QSS，即可快速构建美观的界面。

PyQt-Fluent-Widgets 是一个基于 Qt 的 Fluent Designer 组件库，内置超过 150 个开箱即用的 Fluent Designer 组件，支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件，只需拖拖拽拽，不用编写一行 QSS，就能快速搭建现代化软件界面。

1.2 安装

推荐使用与pyqt5配套使用，pyqt6、pyside6可能会存在问题。不过多数情况下，三者的代码是通用的，可以直接替换。

PyQt-Fluent-Widgets 分为轻量版和完整版，其中完整版多了亚克力标签组件。由于完整版依赖 scipy，会导致打包体积变大许多，所以建议安装轻量版。

# 安装轻量版
pip install PyQt-Fluent-Widgets -i https://pypi.org/simple/

# 安装完整版
pip install "PyQt-Fluent-Widgets[full]" -i https://pypi.org/simple/

注意：请勿同时安装 PyQt-Fluent-Widgets、PyQt6-Fluent-Widgets、PySide2-Fluent-Widgets 和 PySide6-Fluent-Widgets，因为他们的包名都是 qfluentwidgets。

1.3 界面设计

在 Qt Designer 中，有三种种使用 PyQt-Fluent-Widgets 的方式，分别为：提升控件、使用插件和使用FluentDesigner软件。
三种方法分别详见设计师 | QFluentWidgets页面。
其中，FluentDesigner软件内置了 QFluentWidgets 插件，下载链接为Releases · zhiyiYo/PyQt-Fluent-Widgets (github.com)。
下载并解压 FluentDesigner_v*.*.*.zip，双击运行 designer/designer.exe 就能启动 QtDesigner。

1.4 软件运行

在FluentDesigner软件中随便设计一个界面，将其保存为untitled.ui文件，使用pyuic转化为untitled.py文件。
然后，在新建一个main.py文件，文件内容如下：

# coding:utf-8
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QMainWindow

from untitled import Ui_MainWindow


class appMain(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()

        self.setupUi(self)

if __name__ == '__main__':
    from untitled import Ui_MainWindow

    class appMain(QMainWindow, Ui_MainWindow):
        def __init__(self):
            super().__init__()

            self.setupUi(self)


    # enable dpi scale
    QApplication.setHighDpiScaleFactorRoundingPolicy(
        Qt.HighDpiScaleFactorRoundingPolicy.PassThrough)
    QApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
    QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps)

    app = QApplication(sys.argv)
    w3 = appMain()
    w3.show()

    app.exec_()