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 Sleep休眠函数使用简单实例
Feb 02 Python
Python中的os.path路径模块中的操作方法总结
Jul 07 Python
Python爬虫代理IP池实现方法
Jan 05 Python
Python3生成手写体数字方法
Jan 30 Python
Python 数据处理库 pandas 入门教程基本操作
Apr 19 Python
对Python3之进程池与回调函数的实例详解
Jan 22 Python
Python基于opencv调用摄像头获取个人图片的实现方法
Feb 21 Python
人工神经网络算法知识点总结
Jun 11 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
Dec 11 Python
Python爬虫实现模拟点击动态页面
Mar 05 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
Mar 14 Python
python 用opencv实现霍夫线变换
Nov 27 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中上传多个文件的表单设计例子
2014/11/19 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python字典的值可以修改吗
2020/06/29 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
网页美工求职信范文
2014/04/17 职场文书
篮球比赛策划方案
2014/06/05 职场文书
环境科学专业求职信
2014/08/04 职场文书
家具商场的活动方案
2014/08/16 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
社保转移委托书范本
2014/10/08 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书