Qt Designer工具的使用

date
May 27, 2020
Last edited time
Jun 27, 2021 06:40 AM
status
Published
slug
pyqt_basic_5.5
tags
PyQt
summary
type
Post
Field
Plat
 
Qt Designer 是 PyQt 程序 UI 界面的实现工具,使用 Qt Designer 可以拖拽、点击完成 GUI 界面设计,并且设计完成的. ui 程序可以转换成. py 文件供 python 程序调用。本文主要通过用户登录需求描述 Qt Designer 工具开发界面的使用方法。
1、Qt Designer 程序主界面窗口介绍。
2、Qt Designer 程序实现界面开发的案例。包括使用 Qt Designer 实现程序 Gui 开发、使用 pyuic5 将. ui 转换. py 程序、信号与槽的配置以及实现、使用 pyinstaller 转换成可执行程序的完成过程。

环境 & 工具版本

Win10+pyhton3.7.4 + PyQt 5.11.2
打开路径:${python 安装目录}/Lib/site-packages/pyqt5_tools/designer.exe。主界面如下:
notion image
主界面不同区域介绍:
工具箱 区域:提供 GUI 界面开发使用的各种基本控件,如单选框、文本框等。可以拖动到新创建的主程序界面。
主界面区域:用户放置各种从工具箱拖过来的各种控件。模板选项中最常用的就是 Widget(通用窗口)和 MainWindow(主窗口)。二者区别主要是 Widget 窗口不包含菜单栏、工具栏等。可以分别创建对比看看。
对象查看器 区域:查看主窗口放置的对象列表。
属性编辑器 区域: 提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。
信号 / 槽编辑器 区域:编辑控件的信号和槽函数,也可以添加自定义的信号和槽函数。
Widget Box 控件工具箱是按照控件作用类别进行划分的。这里作为实现入门级界面实现,主要介绍最常使用的控件及控件对象相关函数。函数方法知道怎么获取控件输入内容以及如何将后台操作结果输出到界面控件显示的主要函数就可以了。
notion image
notion image
notion image
(1)显示控件。
Lable:文本标签,显示文本,可以用来标记控件。
Text Browser:显示文本控件。用于后台命令执行结果显示。
(2)输入控件,提供与用户输入交互
Line Edit:单行文本框,输入单行字符串。控件对象常用函数为 Text() 返回文本框内容,用于获取输入。setText() 用于设置文本框显示。
Text Edit:多行文本框,输入多行字符串。控件 对象常用函数同 Line Edit 控件。
Combo Box:下拉框列表。用于输入指定枚举值。
(3)控件按钮,供用户选择与执行
Push Button:命令按钮。常见的确认、取消、关闭等按钮就是这个控件。clicked 信号一定要记住。clicked 信号就是指鼠标左键按下然后释放时会发送信号,从而触发相应操作。
Radio Button:单选框按钮。
Check Box:多选框按钮。
notion image
了解基本控件及作用和获取输入 / 显示方法后,就可以开始动手实现小需求了。。比如登录界面。获取用户名和密码并显示。。

创建UI

打开 Qt Designer,开始拖拽控件实现吧。。
Step1:打开主界面,选择 Widget 模板
notion image
Step2:从 Widget Box 工具箱中拖拽 2 个 label、2 个 line Edit、2 个 Push Button 以及 1 个 Text Browser。拖完后如下:
notion image
Step3:双击各个控件,修改控件名称(对应属性编辑区中的 text,可直接双击控件修改)以及对象名称(对应属性编辑区中的 objectName)。对象名称一定记得修改。默认生成的 label_1、label_2 这种名称无法直接判断到底是对应哪个控件。。
notion image
点击菜单栏 Form - Prview。预览界面实现效果
notion image
login.ui 的程序代码如下:
Step4:点击 File -Save 保存实现结果。保存文件名为 login.ui。
notion image
Step5:界面开发完成。
使用命令行pyuic5 -o login.py login.ui转换成. py 文件。调用格式为pyuic5 -o {输出文件名} {输入 designer 设计好的. ui 后缀界面文件}。执行结果如下
notion image
转换后的.py 文件内容如下:

界面与业务逻辑分离实现

这一步主要实现业务逻辑,也就是点击登录和退出按钮后程序要执行的操作。为了后续维护方便,采用界面与业务逻辑相分离来实现。也就是通过创建主程序调用界面文件方式实现。这有 2 个好处。第 1 就是实现逻辑清晰。第 2 就是后续如果界面或者逻辑需要变更,好维护。新建 call_login.py 文件程序,调用 login.py 文件。
运行 call_login.py 程序,结果如下:
notion image
到这里,界面实现和业务主程序已经写好了。但是现在具体业务功能逻辑还未实现。需要对登录和退出的按钮点击执行相对应的操作。
实现部分见代码注释。这里主要添加如下两行命令配置信号和槽的关系。信号和槽的创建和原理下文描述。这里可以参照添加即可。
登录按钮:self.login_Button.clicked.connect(self.display)
退出按钮:self.cancel_Button.clicked.connect(self.close)
详细代码如下:
运行结果如下:
notion image
用户登录小程序开发完成。但是这个界面还有一个小问题,就是拖动的时候,界面会变形。。看图
notion image
是不是觉得不可忍受。。有两个办法,一种是界面点击使用网格布局,一种是使界面大小不可改变。这里介绍第二种方法。在 Qt Designer 上修改主界面最大属性中的长宽设置成与最小属性一致。如下:
notion image
这样设置之后,就不允许在窗口左右两边拖动导致界面改变大小,就可以保证主界面中的控件不会变形。

Pyinstaller打包成.exe文件

用户登录显示程序界面和逻辑都实现了。下来就是要推广使用了。不是所有人电脑上都安装有 python 软件或者对应的 python 版本以及 PyQt5 工具。那么如何让程序在这些未安装 python 软件的机子上运行呢?可以使用 pyinstaller 工具将程序打包成. exe 文件。pyinstaller 使用方法可以参考《使用 Pyinstaller 转换. py 文件为. exe 可执行程序》。打包过程如下:
pyinstaller.exe -F call_login.py -w
notion image
打包成功后 call_login.exe 在当前目录的 dist 目录下。执行 call_login.exe,程序可以正确运行。如下:
notion image
这样,其他人想运行你的程序,就可以直接给他提供 call_login.exe 可执行过程序了。
本文主要讲述了使用 Qt Designer 工具实现一个用户登录显示的小需求。通过这个需求可以知道如何使用 Qt Designer 实现界面开发、.ui 文件转换、业务和界面分离实现以及最简单的信号和槽创建。通过这个需求实现过程描述相信你可以参考动手实现你的小需求。起码可以上手实践了。。
实际上这个程序还有很多小问题。。因为用户登录界面控件少,所以没有感觉出来。。就是控件布局管理。就是如何让界面上的控件整齐有序、布局合理美观。还有信号与槽也没具体说明,待下一篇文章描述。。 https://www.cnblogs.com/linyfeng/p/11223707.html

© Lazurite 2021 - 2024