本文介绍了使用QtDesigner进行UI设计的步骤，包括整体架构流程、工具配置、UI文件转换以及如何实现页面元素的自适应缩放。同时，针对可能出现的问题，如未放置的spacer和保存文件时的错误，提供了解决方案。
概要
使用Qt Designer设计页面时，如果不加以处理，点击最大化窗口后，Main Window能够最大化显示，但是页面中的元素保持固定的大小，并不会跟随当前页面的大小自适应缩放，影响页面美观。
整体架构流程
使用PYQT进行页面设计时有两种方式，一种是直接写.py代码，一种是使用Qt Designer直接拖放元素完成ui设计，后再使用pyuic工具完成.ui文件到.py文件的转换。直接写代码的方式对qt元素组件的熟悉程度要求高于Qt Designer的方式，Qt Designer更加的形象，门槛较低。
基于pyqt5 UI设计需要的环境和工具：
-
python
-
pyqt5库 --pip install 安装即可
-
Qt Designer --ui设计使用，pip install 安装pyqt5-tools库，需要添加External Tools
安装后的Qt Designer
Qt Designer添加External Tools，注意红框中的文件路径
-
pyuic --将.ui文件转换为python工程可调用的.py文件，pyqt5-tools中已包含，不需要单独安装，需要添加External Tools
Arguments：
F i l e N a m e FileName FileName -o F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension.py -x
- pyrcc5 --将.ui文件中包含的外部资源文件（图片，logo等），转换为python工程可调用的_rc.py文件，pyqt5-tools中已包含，不需要单独安装，需要添加External Tools
Arguments：
F i l e N a m e FileName FileName -o F i l e N a m e W i t h o u t E x t e n s i o n FileNameWithoutExtension FileNameWithoutExtension_rc.py
以上环境和工具的具体安装步骤可参考网络其他文档，已十分详尽
Qt Designer UI 设计步骤
- 按需求拖放需要的组件，进行布局，完成设计，生成.ui文件，如下图mianui.ui文件
- 使用pyuic工具将.ui文件转换为同名.py文件，如上图mianui.py，如果ui文件中 包含外部引用的资源文件，需要使用pyrcc工具，生成_rc.py文件，该文件在mianui.py文件中引用
- mianui.py文件在python工程文件中引用，一般采用页面元素操作和逻辑分层的原则，具体方法可以参考其他资料
技术细节
页面缩放自适应是想要实现当用户不想按照默认的窗口大小使用时，点击最大化或者拉动缩小放大工具，工具窗口里的所有元素，应该跟随窗口的变化，全部元素等比例或者部分元素等比例放大缩小，使页面整体协调。效果如下图：
默认页面大小：
最大化页面：
主要设置：
- 两步布局，使用spacer与元素首先进行一次横向布局，再整体进行一次栅格布局，布局完成后整个 布局已经铺满了页面，会跟随页面的大小变化
分别横向布局后的页面：
这样的页面不会自适应缩放
- 组件属性配置
使用说明按钮属性，该元素大小不随页面放大缩小
使用说明按钮右侧spacer属性，设置为expanding后，该元素大小随页面放大缩小
开始按钮设置了水平延展，垂直方向固定，两侧的spacer设置与上个相同
可能出现的问题
在最后保存文件的时候，可能会报错：
错误原因为有未放到布局中的spacer，实际上按照我们两步布局的方式操作，不会有未放到布局中的spacer，因此可以直接点击保存后关闭。保险起见，也可以另存为文件 ，另存为成功之后再关闭。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
