Qt Designer 详细介绍

一、 Qt Designer 简介

1.1 什么是 Qt Designer

QtDesigner 是 QT 官方推出的图形化制作GUI界面的工具。通过拖拽控件的方式就可以快速的制作出一个 GUI 界面。可视化搭建好图形界面之后，只需要关注业务代码即可。Qt Designer 的设计符合MVC的架构，其实现了视图和逻辑的分离。使用 Qt designer 就是为了快速创建出 UI 界面，毕竟手动实现界面效率还是比较低的，特别是还要考虑各种固定组件的布局位置。组件触发可以放在 python 代码中完成。官网说明：https://doc.qt.io/qt-6/designer-to-know.html
Qt Designer 的使用方法其实不难，从左侧的组件库里面拖拽组件放到窗口里面。然后可以像控制窗口一样可以用左键拖拽、缩放组件。最基础的使用就是这些，懂了这些操作完全就可以自己拖拽组件搭配出想要的界面。

Android 界面的可视化设计。Android Studio 自带可视化设计。
Web 前端 Bootstrap 可视化布局系统：https://www.bootcss.com/p/layoutit/

1.2 安装 Qt Designer

安装 Qt Designer 的方法有好几种：

• 安装官方提供的 Qt Creator 开发软件。Qt Creator 是一个 IDE，是针对 Qt 优化的 C++
  开发平台，里面内置了许多 Qt 开发相关的工具，Qt Designer 就在其中。
• 安装任意 Qt Python 包
• 安装 Maya 自带 Qt Designer

这里以安装官方的Python包PySide6为例，使用豆瓣源安装：pip install -i http://pypi.doubanio.com/simple/ PySide6 --trusted-host pypi.doubanio.com，安装后就可以在Python的site-packages\PySide6目录中找到designer.exe，可以创建个快捷方式放在桌面上。

1.3 第3方 控件库

Designer 本身自带的控件比较少，控件样式显示效果也一般，可以安装第3方控件库来增加控件数量，和美化 GUI 界面显示。告别原始 UI 样式。

Fluent Design 控件库 ：https://github.com/zhiyiYo/PyQt-Fluent-Widgets
在线文档:
https://pyqt-fluent-widgets.readthedocs.io/zh-cn/latest/index.html
https://qfluentwidgets.com/zh/pages/about

Fluent Design 是一个强大、可扩展、美观优雅的组件库，包含了大量类似 InfoBar、Flyout、CommandBar 以及 Pivot 等组件类，可以组合使用并直接在 设计师 上实现任何 UI 设计。拖拖拽拽，无需书写 QSS，即可快速构建美观的界面

PySide2、PySide6、PyQt6 控件库： PySide2、PySide6、PyQt6 。
注意： 不要同时安装 PyQt-Fluent-Widgets、PyQt6-Fluent-Widgets、PySide2-Fluent-Widgets、PySide6-Fluent-Widgets，因为包名都是 qfluentwidgets.

1.3.1 运行 Fluent 示例

安装完 pyqt-fluent-widgets 包后，下载仓库源代码，切换到 examples 目录下运行示例代码。
cd examples/gallery
python demo.py

1.3.2 启动 Fluent Design

运行 python ./tools/designer.py 来启动安装了 PyQt-Fluent-Widgets 插件的 QtDesigner。如果操作成功，QtDesigner 的侧边栏中将会显示 PyQt-Fluent-Widgets 的组件。

建议使用虚拟环境。
conda create -n qt5
conda activate qt5
pip install PyQt5
pip install pyqt5-tools

Fluent Design 风格 PyQt/PySide 组件库：https://blog.csdn.net/zhiyiYo/article/details/131328168

二、 启动 Qt Designer

启动后主窗口如下，弹出一个窗口选择Form模板，其中 Widget 与 Main Window 最常用。

这里选择 Main Window 点击创建。然后就可以拖拽左侧的组件到窗口上。按住 ctrl 拖拽可以快速复制组件。Ctrl+R (菜单栏 —> 窗体 —> 预览) 可以预览设计好的界面。

工具栏上的布局按钮可以改变窗口的布局，也可以从左侧拖拽相关的布局到窗口上。通过这些布局就可以让组件等分排布，从而减少 UI 的凌乱，让界面看起来更加美观

• QHBoxLayout - 横向布局。 就是将布局内部的组件 水平方向 等分排列

• QVBoxLayout - 竖向布局。就是将布局内部的组件 垂直方向 等分排列

• QGridLayout - 网格布局。就是将布局内部分成好多网格，类似 Excel 表格。可以让组件占用多个网格，或者空出多余的网格。

2.1 对象 查看器

可以查看主窗口中已放置的对象(就是已经拖拽的控件)以及其相应地Qt类。可以快速查看有哪些哪些控件，以及控件所属层级。

2.1.1 将 QWidget 修改为特定组件

Qt Designer 无法创建一个纯按钮之类的 ui 文件。默认的 ui 文件必须是个容器。但是有个需求就是要弄一个纯 按钮 的 ui 文件，应该要怎么实现。可以通过修改 xml 类来实现。首先默认创建一个 QWidget 的 ui 文件。然后将 ui 文件的 QWidget 修改为 QPushButton，重新用 QtDesigner 打开这个文件。会发现 Qt Designer 里面呈现的是一个按钮而不是 QWidget 。

2.1.2 给 QWidget 添加 MenuBar

也可以实现给 QWidget 添加 QMenuBar 的骚操作。默认情况下，只有 QMainWindow 可以在 Qt Designer 里面配置 QMenuBar 实现下来菜单。由于左侧的组件列表没有 QMenuBar 组件，所以根本就无法添加到 QWidget 里面。通过编辑 ui 文件，然后用上面的方法将两个 ui 文件拼接到一起，就可以实现这种骚操作。这样就不需要手动写 QMenuBar 代码了。

2.1.3 组件提升

默认情况下， Qt Designer 只能拖拽一些基础组件，如果想要用自定义的组件，似乎就无法实现了。其实不然，通过 promote 提升，可以实现将组件提升为 第三方 类。当然，组件提升无法在 Qt Designer 直接预览到效果，只能看到基类的 UI。如果要想实现在 Qt Designer 直接看到效果，也可以用 C++ 开发 Qt Designer 的插件，直接扩展出自定义组件。基础的提升操作如下。

看起来似乎也是针对 C++ 才有效。其实不然。

先添加一个配置头文件的配置，然后再点击 Promote 来提升组件。下面编译这个 ui 文件可以看到神奇的 promote 效果。

from PySide2 import QtCore, QtGui, QtWidgets
 
class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.pushButton = MPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(60, 60, 75, 23))
        self.pushButton.setObjectName("pushButton")
 
        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)
 
    def retranslateUi(self, Form):
        Form.setWindowTitle(QtWidgets.QApplication.translate("Form", "Form", None, -1))
        self.pushButton.setText(QtWidgets.QApplication.translate("Form", "PushButton", None, -1))
 
from dayu_widgets.push_button import MPushButton

头文件自动转为 Python 的库， 类名就对应库里面的类。只要自定义的组件类按照默认的 构造函数传参， 就不存在什么问题。这个东西其实也可以直接用 ui 文件加载的方式调用起来，这里用到了 QUiLoader registerCustomWidget 的使用方法。通过这个方法可以将自定义的组件注册到 QUiLoader 里面，然后 QUiLoader 读取 ui 文件的时候自动映射到第三方组件上。示例：dayu_widget。这个 dayu_widget 第三方库通过 Qt Designer 直接嵌入的。PyToolkit文章

2.2 属性 编辑器

右侧的 “属性编辑器” 可以编辑UI控件的属性，不过很多时候都是用代码来动态修改这些属性。objectName 比较重要，因为在代码中是通过 objectName 这个属性来调用控件的。