PyQt 图解Qt Designer工具的使用方法


Posted in Python onAugust 06, 2019

前言

Qt Designer是PyQt程序UI界面的实现工具,Qt Designer工具使用简单,可以通过拖拽和点击完成复杂界面设计,并且设计完成的.ui程序可以转换成.py文件供python程序调用。本文主要通过用户登录需求描述Qt Designer工具开发界面的使用方法。

开发工具版本

pyhton3.7.4 + PyQt 5.11.2

Qt Designer工具主界面

打开路径:${python安装目录}/Lib/site-packages/pyqt5_tools/designer.exe。主界面如下:

PyQt 图解Qt Designer工具的使用方法

主界面不同区域介绍:

工具箱 区域:提供Gui界面开发各种基本控件,如单选框、文本框等。可以拖动到新创建的主程序界面。

主界面区域:用户放置各种从工具箱拖过来的各种控件。模板选项中最常用的就是Widget(通用窗口)和MainWindow(主窗口)。二者区别主要是Widget窗口不包含菜单栏、工具栏等。可以分别创建对比看看。

对象查看器 区域:查看主窗口放置的对象列表。

属性编辑器 区域: 提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。

信号/槽编辑器 区域:编辑控件的信号和槽函数,也可以添加自定义的信号和槽函数。

Qt Designer基本控件介绍

Widget Box控件工具箱是按照控件作用类别进行划分的。这里作为实现入门级界面实现,主要介绍最常使用的控件及控件对象相关函数。函数方法知道怎么获取控件输入内容以及如何将后台操作结果输出到界面控件显示的主要函数就可以了。

PyQt 图解Qt Designer工具的使用方法

(1)显示控件。

Lable:文本标签,显示文本,可以用来标记控件。

Text Browser:显示文本控件。用于后台命令执行结果显示。

(2)输入控件,提供与用户输入交互

Line Edit:单行文本框,输入单行字符串。控件对象常用函数为Text() 返回文本框内容,用于获取输入。setText() 用于设置文本框显示。

Text Edit:多行文本框,输入多行字符串。控件 对象常用函数同Line Edit控件。

Combo Box:下拉框列表。用于输入指定枚举值。

(3)控件按钮,供用户选择与执行

Push Button:命令按钮。常见的确认、取消、关闭等按钮就是这个控件。clicked信号一定要记住。clicked信号就是指鼠标左键按下然后释放时会发送信号,从而触发相应操作。

Radio Button:单选框按钮。

Check Box:多选框按钮。

PyQt 图解Qt Designer工具的使用方法

Qt Designer工具实现

了解基本控件及作用和获取输入/显示方法后,就可以开始动手实现小需求了。。比如登录界面。获取用户名和密码并显示。。

打开Qt Designer,开始拖拽控件实现吧。。

Step1:打开主界面,选择Widget模板

PyQt 图解Qt Designer工具的使用方法

Step2:从Widget Box工具箱中拖拽2个label、2个line Edit、2个Push Button以及1个Text Browser。拖完后如下:

PyQt 图解Qt Designer工具的使用方法

Step3:双击各个控件,修改控件名称(对应属性编辑区中的text,可直接双击控件修改)以及对象名称(对应属性编辑区中的objectName)。对象名称一定记得修改。默认生成的label_1、label_2这种名称无法直接判断到底是对应哪个控件。。

PyQt 图解Qt Designer工具的使用方法

点击菜单栏Form - Prview。预览界面实现效果

PyQt 图解Qt Designer工具的使用方法

login.ui的程序代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>549</width>
 <height>199</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>用户登录</string>
 </property>
 <widget class="QLabel" name="user_label">
 <property name="geometry">
 <rect>
 <x>50</x>
 <y>40</y>
 <width>61</width>
 <height>21</height>
 </rect>
 </property>
 <property name="text">
 <string>用户名</string>
 </property>
 </widget>
 <widget class="QLineEdit" name="user_lineEdit">
 <property name="geometry">
 <rect>
 <x>130</x>
 <y>40</y>
 <width>113</width>
 <height>20</height>
 </rect>
 </property>
 </widget>
 <widget class="QLabel" name="pwd_label">
 <property name="geometry">
 <rect>
 <x>50</x>
 <y>80</y>
 <width>54</width>
 <height>12</height>
 </rect>
 </property>
 <property name="text">
 <string>密码</string>
 </property>
 </widget>
 <widget class="QLineEdit" name="pwd_lineEdit">
 <property name="geometry">
 <rect>
 <x>130</x>
 <y>70</y>
 <width>113</width>
 <height>20</height>
 </rect>
 </property>
 </widget>
 <widget class="QPushButton" name="login_Button">
 <property name="geometry">
 <rect>
 <x>50</x>
 <y>110</y>
 <width>75</width>
 <height>23</height>
 </rect>
 </property>
 <property name="text">
 <string>登录</string>
 </property>
 </widget>
 <widget class="QPushButton" name="cancel_Button">
 <property name="geometry">
 <rect>
 <x>160</x>
 <y>110</y>
 <width>75</width>
 <height>23</height>
 </rect>
 </property>
 <property name="text">
 <string>退出</string>
 </property>
 </widget>
 <widget class="QTextBrowser" name="user_textBrowser">
 <property name="geometry">
 <rect>
 <x>270</x>
 <y>30</y>
 <width>221</width>
 <height>101</height>
 </rect>
 </property>
 </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

Step4:点击File -Save保存实现结果。保存文件名为login.ui。

PyQt 图解Qt Designer工具的使用方法

Step5:界面开发完成。

将.ui文件转换为.py文件

使用命令行pyuic5 -o login.py login.ui转换成.py文件。调用格式为pyuic5 -o {输出文件名} {输入designer设计好的.ui后缀界面文件}。执行结果如下

PyQt 图解Qt Designer工具的使用方法

转换后的.py文件内容如下:

# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'login.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_Form(object):
 def setupUi(self, Form):
 Form.setObjectName("Form")
 Form.resize(549, 199)
 self.user_label = QtWidgets.QLabel(Form)
 self.user_label.setGeometry(QtCore.QRect(50, 40, 61, 21))
 self.user_label.setObjectName("user_label")
 self.user_lineEdit = QtWidgets.QLineEdit(Form)
 self.user_lineEdit.setGeometry(QtCore.QRect(130, 40, 113, 20))
 self.user_lineEdit.setObjectName("user_lineEdit")
 self.pwd_label = QtWidgets.QLabel(Form)
 self.pwd_label.setGeometry(QtCore.QRect(50, 80, 54, 12))
 self.pwd_label.setObjectName("pwd_label")
 self.pwd_lineEdit = QtWidgets.QLineEdit(Form)
 self.pwd_lineEdit.setGeometry(QtCore.QRect(130, 70, 113, 20))
 self.pwd_lineEdit.setObjectName("pwd_lineEdit")
 self.login_Button = QtWidgets.QPushButton(Form)
 self.login_Button.setGeometry(QtCore.QRect(50, 110, 75, 23))
 self.login_Button.setObjectName("login_Button")
 self.cancel_Button = QtWidgets.QPushButton(Form)
 self.cancel_Button.setGeometry(QtCore.QRect(160, 110, 75, 23))
 self.cancel_Button.setObjectName("cancel_Button")
 self.user_textBrowser = QtWidgets.QTextBrowser(Form)
 self.user_textBrowser.setGeometry(QtCore.QRect(270, 30, 221, 101))
 self.user_textBrowser.setObjectName("user_textBrowser")

 self.retranslateUi(Form)
 QtCore.QMetaObject.connectSlotsByName(Form)

 def retranslateUi(self, Form):
 _translate = QtCore.QCoreApplication.translate
 Form.setWindowTitle(_translate("Form", "用户登录"))
 self.user_label.setText(_translate("Form", "用户名"))
 self.pwd_label.setText(_translate("Form", "密码"))
 self.login_Button.setText(_translate("Form", "登录"))
 self.cancel_Button.setText(_translate("Form", "退出"))

界面与业务逻辑分离实现

这一步主要实现业务逻辑,也就是点击登录和退出按钮后程序要执行的操作。为了后续维护方便,采用界面与业务逻辑相分离来实现。也就是通过创建主程序调用界面文件方式实现。这有2个好处。第1就是实现逻辑清晰。第2就是后续如果界面或者逻辑需要变更,好维护。新建call_login.py文件程序,调用login.py文件。

# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'connect_me.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!
#导入程序运行必须模块
import sys
#PyQt5中使用的基本控件都在PyQt5.QtWidgets模块中
from PyQt5.QtWidgets import QApplication, QMainWindow
#导入designer工具生成的login模块
from login import Ui_Form

class MyMainForm(QMainWindow, Ui_Form):
 def __init__(self, parent=None):
 super(MyMainForm, self).__init__(parent)
 self.setupUi(self)
if __name__ == "__main__":
 #固定的,PyQt5程序都需要QApplication对象。sys.argv是命令行参数列表,确保程序可以双击运行
 app = QApplication(sys.argv)
 #初始化
 myWin = MyMainForm()
 #将窗口控件显示在屏幕上
 myWin.show()
 #程序运行,sys.exit方法确保程序完整退出。
 sys.exit(app.exec_())

运行call_login.py程序,结果如下:

PyQt 图解Qt Designer工具的使用方法

到这里,界面实现和业务主程序已经写好了。但是现在具体业务功能逻辑还未实现。需要对登录和退出的按钮点击执行相对应的操作。

添加信号和槽,实现业务逻辑

实现部分见代码注释。这里主要添加如下两行命令配置信号和槽的关系。信号和槽的创建和原理下文描述。这里可以参照添加即可。

登录按钮:self.login_Button.clicked.connect(self.display)

退出按钮:self.cancel_Button.clicked.connect(self.close)

详细代码如下:

# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'connect_me.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!
#导入程序运行必须模块
import sys
#PyQt5中使用的基本控件都在PyQt5.QtWidgets模块中
from PyQt5.QtWidgets import QApplication, QMainWindow
#导入designer工具生成的login模块
from login import Ui_Form
class MyMainForm(QMainWindow, Ui_Form):
 def __init__(self, parent=None):
 super(MyMainForm, self).__init__(parent)
 self.setupUi(self)
 #添加登录按钮信号和槽。注意display函数不加小括号()
 self.login_Button.clicked.connect(self.display)
 #添加退出按钮信号和槽。调用close函数
 self.cancel_Button.clicked.connect(self.close)
 def display(self):
 #利用line Edit控件对象text()函数获取界面输入
 username = self.user_lineEdit.text()
 password = self.pwd_lineEdit.text()
 #利用text Browser控件对象setText()函数设置界面显示
 self.user_textBrowser.setText("登录成功!\n" + "用户名是: "+ username+ ",密码是: "+ password)

if __name__ == "__main__":
 #固定的,PyQt5程序都需要QApplication对象。sys.argv是命令行参数列表,确保程序可以双击运行
 app = QApplication(sys.argv)
 #初始化
 myWin = MyMainForm()
 #将窗口控件显示在屏幕上
 myWin.show()
 #程序运行,sys.exit方法确保程序完整退出。
 sys.exit(app.exec_())

运行结果如下:

PyQt 图解Qt Designer工具的使用方法

用户登录小程序开发完成。但是这个界面还有一个小问题,就是拖动的时候,界面会变形。。看图

PyQt 图解Qt Designer工具的使用方法

是不是觉得不可忍受。。有两个办法,一种是界面点击使用网格布局,一种是使界面大小不可改变。这里介绍第二种方法。在Qt Designer上修改主界面最大属性中的长宽设置成与最小属性一致。如下:

PyQt 图解Qt Designer工具的使用方法

这样设置之后,就不允许在窗口左右两边拖动导致界面改变大小,就可以保证主界面中的控件不会变形。

Pyinstaller打包成.exe文件

用户登录显示程序界面和逻辑都实现了。下来就是要推广使用了。不是所有人电脑上都安装有python软件或者对应的python版本以及PyQt5工具。那么如何让程序在这些未安装python软件的机子上运行呢?可以使用pyinstaller工具将程序打包成.exe文件。pyinstaller使用方法可以参考《使用Pyinstaller转换.py文件为.exe可执行程序》。打包过程如下:

pyinstaller.exe -F call_login.py -w

PyQt 图解Qt Designer工具的使用方法

打包成功后call_login.exe在当前目录的dist目录下。执行call_login.exe,程序可以正确运行。如下:

PyQt 图解Qt Designer工具的使用方法

这样,其他人想运行你的程序,就可以直接给他提供call_login.exe可执行过程序了。

小结

本文主要讲述了使用Qt Designer工具实现一个用户登录显示的小需求。通过这个需求可以知道如何使用Qt Designer实现界面开发、.ui文件转换、业务和界面分离实现以及最简单的信号和槽创建。通过这个需求实现过程描述相信你可以参考动手实现你的小需求。起码可以上手实践了。。

实际上这个程序还有很多小问题。。因为用户登录界面控件少,所以没有感觉出来。。就是控件布局管理。就是如何让界面上的控件整齐有序、布局合理美观。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中利用原始套接字进行网络编程的示例
May 04 Python
python实现批量下载新浪博客的方法
Jun 15 Python
Windows上使用virtualenv搭建Python+Flask开发环境
Jun 07 Python
python数据结构之链表详解
Sep 12 Python
利用Python如何生成hash值示例详解
Dec 20 Python
Python操作MongoDB数据库的方法示例
Jan 04 Python
Sanic框架安装与简单入门示例
Jul 16 Python
Python将列表数据写入文件(txt, csv,excel)
Apr 03 Python
python实现简单学生信息管理系统
Apr 09 Python
小 200 行 Python 代码制作一个换脸程序
May 12 Python
opencv 图像加法与图像融合的实现代码
Jul 08 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
Dec 14 Python
Python 用matplotlib画以时间日期为x轴的图像
Aug 06 #Python
Django Python 获取请求头信息Content-Range的方法
Aug 06 #Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
Aug 06 #Python
django foreignkey外键使用的例子 相当于left join
Aug 06 #Python
Python Django简单实现session登录注销过程详解
Aug 06 #Python
Django框架中序列化和反序列化的例子
Aug 06 #Python
python异常触发及自定义异常类解析
Aug 06 #Python
You might like
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
js单例模式的两种方案
2013/10/22 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
项目副经理岗位职责
2013/12/30 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
辩论赛主持词
2014/03/18 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
校运会广播稿
2015/08/19 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS