PyQT5速成教程之Qt Designer介绍与入门


Posted in Python onNovember 02, 2020

Qt Designer的介绍

PyQT5速成教程之Qt Designer介绍与入门

在PyQt中编写UI界面可以直接通过代码来实现,也可以通过Qt Designer来完成。Qt Designer的设计符合MVC的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷。Qt Designer中的操作方式十分灵活,其通过拖拽的方式放置控件可以随时查看控件效果。Qt Designer生成的.ui文件(实质上是XML格式的文件)也可以通过pyuic5工具转换成.py文件。
Qt Designer随PyQt5-tools包一起安装,其安装路径在 “Python安装路径\Lib\site-packages\pyqt5-tools”下。
若要启动Qt Designer可以直接到上述目录下,双击designer.exe打开Qt Designer;或将上述路径加入环境变量,在命令行输入designer打开;或在PyCharm中将其配置为外部工具打开。
下面以PyCharm为例,讲述PyCharm中Qt Designer的配置方法。

PyCharm中PyQt5工具配置

打开PyCharm,选择Settings -> Tools -> External Tools,点击左上角的绿色加号。

 PyQT5速成教程之Qt Designer介绍与入门

Name填入QtDesigner(方便后续使用,名称无所谓)。Program选择我们安装的PyQt5-tools下面的designer.exe。Working directory则选择我们的工作目录。然后点击OK,则添加了QtDesigner作为PyCharm的外置工具。
然后添加PyUIC(UI转换工具),PyUIC的Program为Python.exe,在Python的安装目录下面的Scripts目录下,Working directory同理设为我们的工作目录,Arguments则填入如下代码:

-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py

最后添加pyrcc用于PyQt5的资源文件转码。具体配置与上述内容相同,Arguments填入:

$FileName$ -o $FileNameWithoutExtension$_rc.py

退出之前,点击Apply保存配置。配置完成之后,PyCharm中会加入3个工具。

PyQT5速成教程之Qt Designer介绍与入门 

点击QtDesigner则打开QtDesigner的界面。

Qt Designer界面简介

刚打开Qt Designer,则弹出如下图所示的窗口。

PyQT5速成教程之Qt Designer介绍与入门 

创建新的Form给出了5个模板,其中Widget与Main Window最为常用。这里我们选择创建一个Main Window。

PyQT5速成教程之Qt Designer介绍与入门 

上面界面的最左侧菜单为Widget Box,Widget Box中包含PyQt5中的所有Widget组件,我们可以从左侧的Widget Box中拖拽出诸如Button、View和Input等组件到中间的窗口中。
点击Form -> Preview(快捷键为Ctrl+R)则可以预览我们设计好的界面,也可以用Preview In来选择在相应的主题风格下预览。
我们拖拽一个Label与Button进入主窗口(Main Window)。

PyQT5速成教程之Qt Designer介绍与入门 

此时在右上角的Object Inspector(对象查看器)中可以看到主窗口中的已放置的对象(label与pushButton)以及其相应地Qt类。

PyQT5速成教程之Qt Designer介绍与入门 

以Label为例,此时我们点击Main Window中的label或是在Object Inspector中选取label后,查看右侧的一块区域——Property Editor(属性编辑器)。

PyQT5速成教程之Qt Designer介绍与入门 

其主要包含属性有如下:

名称 含义
objectName 控件对象名称
geometry 相应宽和高与坐标
sizePolicy 控件大小的策略
minimumSize 最小的宽和高
maximumSize 最大的宽和高
font 字体
cursor 光标

PS:将minimumSize和maximumSize设为一样的数值之后,则窗口的大小固定。

最右下角的部分则为Resource Browser(资源浏览器),资源浏览器中可以添加相应地如图片素材,作为Label或Button等控件的背景图片等。

PyQT5速成教程之Qt Designer介绍与入门

Qt Designer的UI文件

使用Qt Designer设计保存的文件为.ui格式的文件。
通过保存并使用记事本等软件打开,我们可以看到.ui文件的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>800</width>
 <height>600</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>MainWindow</string>
 </property>
 <widget class="QWidget" name="centralwidget">
 <widget class="QLabel" name="label">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>80</y>
  <width>72</width>
  <height>15</height>
  </rect>
 </property>
 <property name="text">
  <string>TextLabel</string>
 </property>
 </widget>
 <widget class="QPushButton" name="pushButton">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>120</y>
  <width>93</width>
  <height>28</height>
  </rect>
 </property>
 <property name="text">
  <string>PushButton</string>
 </property>
 </widget>
 </widget>
 <widget class="QMenuBar" name="menubar">
 <property name="geometry">
 <rect>
  <x>0</x>
  <y>0</y>
  <width>800</width>
  <height>26</height>
 </rect>
 </property>
 </widget>
 <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

从.ui文件的第一行我们便能看出,其实质是一个XML文件。ui文件中存放了在主窗口中的一切控件的相关属性。使用XML文件来存储UI文件,具有高可读性和移植性,因此我们可以方便地将.ui文件转换到.py文件,从而使得我们可以使用Python语言在设计的GUI上面编程。

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

将.ui文件转换到.py文件很简单,在前面我们曾设置了pyuic5这个工具。如果你没有在PyCharm中设置这个工具,或者根本没有使用PyCharm,则可以到命令行中使用如下命令实现.ui到.py的转换。

pyuic5 - o 目标文件名.py 源文件名.ui

或者直接在PyCharm中,找到.ui文件,右键 打开菜单找到External Tools->PyUIC。点击之后,我们在相应工程目录下会产生一个.py文件。(注意,.ui文件必须存放在我们的External Tools中设置的相应项目目录下)

PyQT5速成教程之Qt Designer介绍与入门 

转换完成之后,打开.py文件。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'mainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.10.1
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
 def setupUi(self, MainWindow):
  MainWindow.setObjectName("MainWindow")
  MainWindow.resize(800, 600)
  self.centralwidget = QtWidgets.QWidget(MainWindow)
  self.centralwidget.setObjectName("centralwidget")
  self.label = QtWidgets.QLabel(self.centralwidget)
  self.label.setGeometry(QtCore.QRect(240, 80, 72, 15))
  self.label.setObjectName("label")
  self.pushButton = QtWidgets.QPushButton(self.centralwidget)
  self.pushButton.setGeometry(QtCore.QRect(240, 120, 93, 28))
  self.pushButton.setObjectName("pushButton")
  MainWindow.setCentralWidget(self.centralwidget)
  self.menubar = QtWidgets.QMenuBar(MainWindow)
  self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
  self.menubar.setObjectName("menubar")
  MainWindow.setMenuBar(self.menubar)
  self.statusbar = QtWidgets.QStatusBar(MainWindow)
  self.statusbar.setObjectName("statusbar")
  MainWindow.setStatusBar(self.statusbar)

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

 def retranslateUi(self, MainWindow):
  _translate = QtCore.QCoreApplication.translate
  MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
  self.label.setText(_translate("MainWindow", "TextLabel"))
  self.pushButton.setText(_translate("MainWindow", "PushButton"))

观察上述文件,可以看到如果不通过Qt Designer来制作界面的话,我们将会一次次地调试程序,来讲按钮和Label等放在合适的位置,这将是极其痛苦的过程。而通过Qt Designer,我们可以快速地制作UI,并生成Python的代码,从而实现快速地UI的开发。

使用转换的.py文件

然而,此时之间运行这个转换好的Python文件是无法显示任何窗口的。因为这个Python文件只有定义主窗口以及其控件的代码,并没有程序入口的代码。为了秉持视图与逻辑分离的原则,我们再编写一个新的脚本来调用这个文件,并且创建一个窗口。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from mainWindow import *


class MyWindow(QMainWindow, Ui_MainWindow):
 def __init__(self, parent=None):
  super(MyWindow, self).__init__(parent)
  self.setupUi(self)

if __name__ == '__main__':
 app = QApplication(sys.argv)
 myWin = MyWindow()
 myWin.show()
 sys.exit(app.exec_())

通过上述代码,我们继承了Ui_MainWindow类,使用其构造方法构造主窗口,并定义了程序的入口,通过创建QApplication对象来创建Qt窗口。其运行结果如下:

PyQT5速成教程之Qt Designer介绍与入门

通过上述操作,我们熟悉了Qt Designer设计界面,到实现业务逻辑的大致工作流程。通过这个工作流程可以简化工作,实现速度的提升。
通过对视图与业务逻辑的分离,在每次更改Qt Designer的UI设计的时候,也不用重新编写代码,而只需对更改的部分做稍微的修改即可。

在下一讲中,我们将继续讲解Qt Designer的使用。

到此这篇关于PyQT5速成教程之Qt Designer介绍与入门的文章就介绍到这了,更多相关Qt Designer介绍与入门内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python多线程扫描端口示例
Jan 16 Python
python实现apahce网站日志分析示例
Apr 02 Python
Python实现子类调用父类的方法
Nov 10 Python
python实现杨氏矩阵查找
Mar 02 Python
Python3.5内置模块之time与datetime模块用法实例分析
Apr 27 Python
python 判断linux进程,并杀死进程的实现方法
Jul 01 Python
python/Matplotlib绘制复变函数图像教程
Nov 21 Python
Python将列表中的元素转化为数字并排序的示例
Dec 25 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
May 26 Python
IntelliJ 中配置 Anaconda的过程图解
Jun 01 Python
Python参数传递及收集机制原理解析
Jun 05 Python
Python中使用Opencv开发停车位计数器功能
Apr 04 Python
如何基于matlab相机标定导出xml文件
Nov 02 #Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
Nov 02 #Python
Python如何急速下载第三方库详解
Nov 02 #Python
关于python3.9安装wordcloud出错的问题及解决办法
Nov 02 #Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
Nov 02 #Python
jupyter notebook 写代码自动补全的实现
Nov 02 #Python
Python QT组件库qtwidgets的使用
Nov 02 #Python
You might like
PHP常用代码
2006/11/23 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
优化Vue中date format的性能详解
2020/01/13 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python3.6数独问题的解决
2019/01/21 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
局域网标准
2016/09/10 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
应届生自我鉴定
2013/12/11 职场文书
学校采购员岗位职责
2014/01/02 职场文书
药品业务员岗位职责
2014/04/17 职场文书
好听的队名和口号
2014/06/09 职场文书
办理收楼委托书范本
2014/10/09 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书