PyQt5:使用QT设计师设计界面
一. 界面设计
登录预览:
图1.1 设计界面
界面文件
可以在这里下载login.ui文件
资源文件
除了ui文件,有时候需要使用到资源:
图片资源
窗体图标(login.png):
.qrc文件
可以在这里下载.qrc文件,文件内容如下:
<RCC><qresource prefix="images"><file>images/login.png</file><file>images/app.png</file></qresource>
</RCC>
二. 生成PyQt5代码
2.1 环境
为了使用PyQt5,需要安装PyQt5模块,这里使用pip进行安装:
pip3 install PyQt5
PyQt5安装完成之后,就可以运行.py文件了。为了方便打包文件成独立的可执行文件,还需要安装pyinstaller,使用pip安装即可:
pip3 install pyinstaller
以上环境基于window,Python版本为3.6.2
注:使用pip3安装只支持Python3.5往后的版本,如果使用使用2.x版本的python,需要下载源码进行安装
2.2 生成.py模块
这个步骤与Qt的qmake命令一样,根据ui文件生成对应的源码文件,除了ui文件,.qrc文件同样需要转为.py模块
- 转换.ui为文件为.py文件,可以使用pyuic5命令来转换文件:
pyuic5 login.ui -o ui_login.py
-o ui_login.py
表示输出到ui_login.py文件,如果没有-o
参数,将会打印python代码到控制台。
- 资源文件(.qrc)使用pyrcc5命令来转换:
pyrcc5 qtdesigner.qrc -o qtdesigner_rc.py
转换资源文件,对文件名有命名规则:主文件名_rc.py
。其中主文件名
必须是.qrc的主文件名,否则在运行python文件的时候出现qtdesigner_rc模块找不到的问题。
2.3 扩展Ui_LoginDialog类
生成python代码后,需要把Ui_LoginDialog类与QMainWindow类绑定在一起(注:在设计登录界面时使用的是QMainWindow,因此在扩展时也需要使用QMainWindow), Login.py文件内容如下:
# coding:utf-8from PyQt5.QtWidgets import QMainWindow
from PyQt5.QtGui import QMouseEvent
from PyQt5 import Qtimport ui_loginclass LoginDialog(QMainWindow, ui_login.Ui_MainWindow):def __init__(self):super().__init__()self.setupUi(self)
以上代码中,定义了一个LoginDialog类,这个类扩展了QMainWindow
类以及ui_login.Ui_MainWindow
,QMainWindow
类是QtPy5提供的窗体类,ui_login.Ui_MainWindow
则是使用pyuic5
命令生成的界面类。代码self.setupUi(self)
功能与C++版本的Qt一样。
2.4 启动界面
以上几上步骤仅仅是将界面类封装了,还没有启动界面的地方,这里使用app.py文件来作为程序入口:
import sys
from PyQt5.QtWidgets import QApplication
import Loginif __name__ == '__main__':app = QApplication(sys.argv)win = Login.LoginDialog()win.show()sys.exit(app.exec_())
app = QApplication(sys.argv)
:Qt程序的常规启动操作win = Login.LoginDialog()
:创建登录窗口win.show()
:显示窗口sys.exit(app.exec_())
:执行app
从以上四行代码可以看出,PyQt5开发的代码与Qt开发的代码有惊人的相似之处。
直接执行python app.py
即可启动
图2.4.1 运行界面
2.5 为按钮添加响应事件
与Qt一样,PyQt5使用“信号和槽”来作为通信机制
2.5.1 为取消按钮添加事件
定义槽:
def onCancleClicked(self):self.close()
在__init()__
中添加连接“信号和槽”:
def __init__(self):super().__init__()self.setupUi(self)self.mBtnCancel.clicked.connect(self.onCancleClicked)
以上代码实现点击取消按钮程序退出
2.5.2 为登录按钮添加事件
定义槽:
def onLoginClicked(self):name = self.mTextUserName.text()passwd = self.mTextPassword.text()QMessageBox.information(None, "登录提示", "用户名:" + name + "密码:" + passwd, QMessageBox.Ok, QMessageBox.Ok)
在__init()__
中添加连接“信号和槽”:
def __init__(self):super().__init__()self.setupUi(self)self.mBtnCancel.clicked.connect(self.onCancleClicked)self.mBtnLogin.clicked.connect(self.onLoginClicked)
点击登录按钮,弹出对话框。
2.6 Login.py完整代码如下
# coding:utf-8from PyQt5.QtWidgets import QMainWindow, QMessageBox
from PyQt5.QtGui import QMouseEvent
from PyQt5 import Qtimport ui_loginclass LoginDialog(QMainWindow, ui_login.Ui_MainWindow):def __init__(self):super().__init__()self.setupUi(self)self.setWindowFlag(Qt.Qt.FramelessWindowHint) # 隐藏窗口标题栏self.mDragWindow = Falseself.mMousePoint = []self.mBtnCancel.clicked.connect(self.onCancleClicked)self.mBtnLogin.clicked.connect(self.onLoginClicked)def mouseMoveEvent(self, event):e = QMouseEvent(event)if self.mDragWindow:self.move(e.globalPos() - self.mMousePoint)e.accept()def mousePressEvent(self, event):e = QMouseEvent(event)if e.button() == Qt.Qt.LeftButton:self.mMousePoint = e.globalPos() - self.pos()self.mDragWindow = Truee.accept()def mouseReleaseEvent(self, event):self.mDragWindow = Falsedef onLoginClicked(self):name = self.mTextUserName.text()passwd = self.mTextPassword.text()QMessageBox.information(None, "登录提示", "用户名:" + name + "密码:" + passwd, QMessageBox.Ok, QMessageBox.Ok)def onCancleClicked(self):self.close()
self.setWindowFlag(Qt.Qt.FramelessWindowHint)
可以把窗体的标题栏隐藏掉,为移动窗体,需要添加额外的代码:
def mouseMoveEvent(self, event):e = QMouseEvent(event)if self.mDragWindow:self.move(e.globalPos() - self.mMousePoint)e.accept()def mousePressEvent(self, event):e = QMouseEvent(event)if e.button() == Qt.Qt.LeftButton:self.mMousePoint = e.globalPos() - self.pos()self.mDragWindow = Truee.accept()def mouseReleaseEvent(self, event):self.mDragWindow = False
以上三个函数都是PyQt5的事件,在LoginDialog类中重写了这三个函数,以实现无标题栏窗体的拖动功能。
图2.6.1 无标题的登录界面:
三. 打包
在windows下,可以打包成.exe文件:
pyinstaller -F -w app.py Login.py ui_login.py qtdesigner_rc.py --icon=app.ico
-F
:表示打包成单一文件-w
:使用窗口模式,如果没有这个选项,生成的exe文件启动时会带有命令行窗口--icon=app.ico
:设置应用程序的图标,该图标与窗体的上图标是区别的,此图标是在windows文件夹显示时的图标。
四. 最后
码源:https://gitee.com/msgy/PyQt5-Designer
PyQt5:使用QT设计师设计界面相关推荐
- 从零开始,在pycharm中使用pyqt5和pyqt5-tools和QT Designer设计界面,不用敲代码
从零开始,在pycharm中使用pyqt5和pyqt5-tools和QT Designer设计界面,不用敲代码 结果功能展示: 根据设计界面自动生成的python代码: from PyQt5 impo ...
- qt如何设计界面更美观_8个更好的界面设计的黄金法则
qt如何设计界面更美观 设计师每天都需要解决问题,找到正确的解决方案需要深入的研究和精心计划的测试. 发现一种万能的方法或一个秘密公式可以自动解决我们所有的界面设计问题,将是非常不错的. 我们可能还没 ...
- Qt designer设计界面
1.利用 Qt designer 设计界面,保存为ui文件,例如 test.ui 2.将此文件放入 Creater 工程目录,在.pro 文件末尾处加入语句 FORMS += test.ui 3.点击 ...
- python qt gui教程_Python GUI教程(四):安装并使用Qt设计师设计Python GUI
一.安装PyQt5 设计师工具 安装 默认情况下,我们在安装PyQt5的时候会自动安装Qt设计师软件: 如果没有安装的,我们可以使用Python包管理工具pip进行安装: pip install py ...
- 【qt】Qt Creator 设计界面与结果不一致问题
参考:高分屏下qt creator缩放设定 (amobbs.com 阿莫电子论坛 - 东莞阿莫电子网站) 问题 Qt Creator 设计界面显示的UI大小与结果不是一比一的比例. 环境 电脑系统:w ...
- PyQt5 图形界面-基础准备:安装Qt Creater、Qt Designer工具,使用Qt Designer设计界面,安装PyQt5工具库
PyQt5 就是一个把 QtDesigner 设计的界面转化为 python 代码的 python 库. QtDesigner 就是 QtCreater 里的一个功能,所以我们需要安装 QtCreat ...
- Qt使用Qt Designer进行界面设计
上一章我们使用代码直接进行界面设计,这一章我们使用Qt Designer进行界面设计,简单直接,所见即所得,大大提高了工作效率,特别是对于复杂界面. 1熟悉Qt Designer Qt Designe ...
- PyQT5 之 Qt Designer 介绍与入门
From:https://www.jianshu.com/p/5b063c5745d0 养薛定谔的猫 简书:https://www.jianshu.com/u/bf82b363ae88 Qt Desi ...
- 使用Qt设计师文件的3种方式
使用Qt设计师设计的.ui界面文件是XML文件,有3种方式在PyQt中使用,本文将通过实例进行讲解. 使用PyQt中如何结合Qt设计师进行开发中的例子.点击按钮修改标签的内容. 1. 直接使用ui文件 ...
最新文章
- leetcode算法题--重建二叉树
- java commons.util_Java — CommonUtil
- 117. Populating Next Right Pointers in Each Node II
- 阿里达摩院自主研发AI芯片 布局“中国芯”
- 下载Bootstrap3源码版本
- vba 操作html,VBA IE对象的操作方法
- IPv6下VRRP配置原理及实例
- ffmpeg的下载及安装
- 目不暇接!华为2020春季新品发布会群英荟萃
- C++ function关键字
- 漫画:PHP女程序员自救的技巧
- 前端涨薪必读,node.js入门保姆级教程
- (总结)什么是HTML语义化
- How to choose optimizer ?训练时,如何选择优化器?
- 四句话改变你的人生:一念之转
- SCON:串行控制寄存器 之 格式
- 微擎在平台入口不显示安装的模块_【微擎系统】2.0.8更新说明
- java-net-php-python-47ssm志愿者管理系统程序计算机毕业设计程序
- 程序员学英语:口语999句之(001-333句)
- WUSTOJ 1279: Wallace and His Pet(Java)