Qt Designer快速入门(python GUI 可视化界面搭建)

Qt designer入门指导,这个主要用来辅助设计界面的,生成的ui文件还是要转成py文件拿到pycharm等编辑器继续开发的。

Qt designer,即 Qt设计师,是一个强大、灵活的可视化GUI 设计工具,可以帮助我们加快开发PyQt程序的速度。Qt designer是专门用来制作PyQt程序中U界面的工具,它生成的UI界面是一个后缀为.ui的文件。该文件使用起来非常简单,可以通过命令将.ui文件转换成.py格式的文件,并被其他Python文件引用;也可以像上节搭建环境一样,配置工具,直接操作,不过其本质,都是运行对应的工具转换程序实现的。

Qt designer符合MVC(模型—视图一控制器)设计模式,做到了显示和业务逻辑的分离。

Qt designer具有以下优点。

使用简单,通过拖曳和点击就可以完成复杂的界面设计,而且还可以随时预览查看效果图。

转换Python文件方便。Qt designer可以将设计好的用户界面保存为.ui文件,其实是XML格式的文本文件。为了在 PyQt中使用.ui文件,可以通过 pyuic5命令将.ui文件转换为.py文件件,然后将.py文件引入到自定义的Python代码中。

1、新建主窗口

在Qt designer 的安装路径下双击designer.exe文件,打开PyQt 5的 Qt designer,会自动弹出“新建窗体”对话框,如图所示。在模板选项中,最常用的就是Widget(通用窗口)和 Main Window(主窗口)。在PyQt 5中 Widget被分离出来,用来替代 Dialog,并将Widget放入了QtWidget模块库中。

新建窗体
模板选择“Main Window”,创建一个主窗口,保存并命名为firstMainWin.ui,如图所示,主窗口默认添加了菜单栏、工具栏和状态栏。

2、窗体主要功能区域介绍

Widget Box(工具箱),如图所示,其中提供了很多控件,每个控件都有自己的名称,提供不同的功能,比如常用的按钮、单选钮、文本框等,可以直接拖放到主窗口中。在菜单栏中选择“窗体”→“预览”,或者按“Ctrl+R”快捷键,就可以看到窗口的预览效果了。

工具箱
可以从Buttons栏拖拽一个Push Button按钮到主窗体,如图所示。

放入一个按钮
在对象查看器中,可以查看主窗体中放置的对象列表,如图所示。

对象查看器
属性编辑器中庭了对窗体、控件、布局的属性编辑功能,如图所示。

属性编辑器
主要功能部分注解如下:

geometry,相对坐标系。

sizePolicy,控件大小策略。

minimumSize,最小宽度、高度。

maximumSize,最大宽度、高度。如果想让窗口或控件的大小固定,则可以将minimumSize和 maximumSize这两个属性设置成一样的数值。

font,字体。

cursor,光标。

windowTitle,窗口标题。

windowsIcon/icon,窗口图标/控件图标。.iconSize,图标大小。

toolTip,提示信息。

statusTip,任务栏提示信息。text,控件文本。

shortcut,快捷键。

3、查看UI文件

采用Qt designer 工具设计的界面文件默认为.ui文件,描述了窗口中控件的属性列表和布局显示。.ui 文件里面包含的内容是按照XML(可扩展标记语言)格式处理的。

将上节的一个按钮示例保存一下,用pycharm打开查看,显示内容如下:

<?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>1082</width>
<height>833</height>
</rect>
</property>
<property name="windowTitle">
<string>MainWindow</string>
</property>
<widget class="QWidget" name="centralwidget">
<widget class="QPushButton" name="pushButton">
<property name="geometry">
<rect>
<x>280</x>
<y>230</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>1082</width>
<height>26</height>
</rect>
</property>
</widget>
<widget class="QStatusBar" name="statusbar"/>
</widget>
<resources/>
<connections/>
</ui>
由上可以看出,按钮的设置参数与使用Qt designer打开.ui文件时显示的信息是一致的。有了Qt designer,开发者就能够更快地开发设计出程序界面,避免了用纯代码来编写的烦琐,从而不必担心底层的代码实现。

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

使用Qt designer设计的用户界面默认保存为.ui文件,其内容结构类似于XML,但这种文件并不是我们想要的,我们想要的是.py文件,所以还需要使用其他方法将.ui文件转换为.py文件。本文提供了2种方法。

1)通过pycharm设置Tools

设置方式详见上节:

PyQt5环境搭建-最新

PyQt5的官方网站是:https://www.riverbankcomputing.com/。安装PyQt5有两种方式:既可以下载PyQt5的最新源码进行编译安装,也可以使用pip install 进行在线安装。对于初学者来说,通过编译PyQt 5源码的方式进行安装和配置环境比较麻烦,笔者推荐使用pip install命令在线安装PyQt 5,这种“一键式”的安装方式是最简单的,只需要运行一行命令即可。但需要注意的是,Python安装模块使用的镜像默认是国外的,因为网络问题,在国内下载国外的P

通过打开Tools->External Tools->PyUIC将.ui文件转换为.py文件。

2)通过命令行把.ui文件转换为.py文件

PyQt 5安装成功后,pyuic5命令默认安装在%/python3x/Scripts目录下,在笔者的机器上pyuic5的安装路径是C:\Users\Administrator\Desktop\python_pyqt5\Scripts

(我是用虚拟环境创建的工程,所以不在python3x根目录下)

注意:如果输入 pyuic5命令没有得到正确提示,而是提示“pyuic5不是内部命令或外部命令,也不是可运行的程序或批处理文件”,则是由于Python 3.*环境配置出错导致的,请将pyuic5.exe可执行程序的目录添加到环境变量。

要想将firstMain Win.ui转换成.py文件,通过PyQt5提供的命令行工具 pyuic5可以轻松实现。这里一般将UI单独存成一个文件,便于更新。输入以下命令把UI文件转换成Python文件。

打开命令窗口,输入上述指令 pyuic5 -o firstMainnWin.py firstMainwin.ui:

错误示范
发现没有此文件,需注意:在使用此指令前,要用cd指令进入到当前.ui文件的根目录下,如我的文件.ui文件存放在C:\Users\Administrator\Desktop\python_pyqt5,此时输入指令:

cd Desktop

进入desktop
在输入cd python_pyqt5:

进入到.ui文件根目录
此时,在输入pyuic5 -o firstMainnWin.py firstMainwin.ui

转换成功
转换完成,在C:\Users\Administrator\Desktop\python_pyqt5跟录下,就可以发现刚才转换的.py文件:

5、界面与逻辑分离

我们通过之前的内容学会了如何制作.ui文件,以及如何把.ui文件转换成.py文件。值得注意的是,由于这里的.py文件是由.ui文件编译而来的,因此当.py文件发生变化时,对应的.py文件也会发生变化。我们把这种由.ui文件编译而来的.py文件称为界面文件。由于界面文件每次编译时都会初始化,所以需要新建一个.py 文件调用界面文件,这个新建的.py文件被称为逻辑文件,也可以称为业务文件。界面文件和逻辑文件是两个相对独立的文件,通过上述方法就实现了界面与逻辑的分离(也就是我们之前所说的“显示和业务逻辑的分离”)。

实现界面与逻辑的分离方法很简单,只需要新建一个 CallFirstMainWin.py文件,并继承界面文件的主窗口类即可。其完整代码如下:

import sys
from PyQt5.QtWidgets import QApplication , QMainWindow
from firstMainnWin import*
class MyMainWindow (QMainWindow,Ui_MainWindow):
def __init__(self, parent = None):
super(MyMainWindow, self).__init__(parent)
self.setupUi(self)

if __name__ == '__main__':
app = QApplication(sys.argv)
myWin = MyMainWindow()
myWin.show()
sys.exit(app.exec_())
运行之后,即可显示UI界面:

在上面的代码中实现了业务逻辑,代码结构也清晰很多。如果以后想要更新界面,只需要对.ui文件进行更新,然后再编译成对应的.py 文件即可;而逻辑文件则视情况做一些调整,一般情况下不需要调整太多。

PyQt支持界面与逻辑的分离,这对于新手来说无疑是最大的福音。当然,要做出华丽的界面还是要学一些代码的,Qt designer 提供了一些解决方法。另外,也可以通过Qt designer生成的代码来学习一些窗口控件的用法。

作者:海鸥之道 https://www.bilibili.com/read/cv14305733 出处:bilibili

THE END