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多线程threading.Lock锁用法实例
Nov 01 Python
python正常时间和unix时间戳相互转换的方法
Apr 23 Python
python基础入门学习笔记(Python环境搭建)
Jan 13 Python
Python enumerate索引迭代代码解析
Jan 19 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
Mar 18 Python
使用python实现抓取腾讯视频所有电影的爬虫
Apr 15 Python
Python 抓取微信公众号账号信息的方法
Jun 14 Python
Django框架之DRF 基于mixins来封装的视图详解
Jul 23 Python
Python中最好用的命令行参数解析工具(argparse)
Aug 23 Python
python中文分词库jieba使用方法详解
Feb 11 Python
屏蔽Django admin界面添加按钮的操作
Mar 11 Python
基于PyTorch实现一个简单的CNN图像分类器
May 29 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
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
分享Python字符串关键点
2015/12/13 Python
对Python3中的input函数详解
2018/04/22 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python 内置模块详解
2019/01/01 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
中国制造网:Made-in-China.com
2019/10/25 全球购物
大学活动策划书范文
2014/01/10 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
洗发水广告词
2014/03/13 职场文书
协议书模板
2014/04/23 职场文书
经典演讲稿汇总
2014/05/19 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS