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

未经允许不得转载：肥猫博客 » Qt Designer快速入门（python GUI 可视化界面搭建）