Qt Designer 详细介绍
Qt Designer 详细介绍
Qt Designer是Qt官方推出的一款图形化界面设计工具，通过拖拽控件的方式可以快速制作出GUI界面。本文将详细介绍Qt Designer的使用方法，包括其安装、基本操作、第三方控件库的使用以及一些实用技巧。
一、Qt Designer简介
1.1 什么是Qt Designer
Qt Designer是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 第三方控件库
Designer本身自带的控件比较少，控件样式显示效果也一般，可以安装第三方控件库来增加控件数量，和美化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与MainWindow最常用。
这里选择MainWindow点击创建。然后就可以拖拽左侧的组件到窗口上。按住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这个属性来调用控件的。