Qt Designer是PyQt5的可视化GUI设计工具，可以帮助开发人员快速开发PyQt程序。它生成的UI界面是后缀为.ui的文件。而PyUIC则可以将.ui转换为.py文件。

1 窗口主要区域介绍

1.1 Widget Box（工具箱）

提供了多种空间，每个控制都提供不同的功能。比如常见的按钮，单选钮，文本框等，可以直接拖放到主窗口中。
按Ctrl+R快捷键可以预览窗口效果。

1.2 主窗口

主窗口中一般可以新建MainWindow或者打开一个已有的ui文件

1.3 对象查看器

可以查看主窗口中放置的对象列表。

1.4 属性编辑器

提供了对窗口，控件，布局的属性编辑功能。

以下列举几个常用的属性

1.5 信号/槽编辑器，动作编辑器和资源浏览器

信号/槽编辑器：可为控件添加自定义的信号和槽函数。
资源浏览器：可以为控件添加图片，比如Label，Button的背景图片。

2 界面与业务分离

一般来说，ui文件生成的py文件中，只包含GUI设计的界面代码。而业务代码均新建.py文件（此类文件称为逻辑文件或业务文件），界面文件和逻辑文件是两个相对独立的文件，从而实现了显示与业务分析。
例如：

3 布局入门

当主窗口中存在多种组件时，就需要使用布局控制，否则界面会显得杂乱无章。
Qt Designer提供了4种窗口布局方式：

• Vertical Layout：垂直布局--控件默认按照从上到下的顺序进行纵向添加
• Horizontal Layout：水平布局--空间默认按照从左到右的顺序进行横向添加。
• Grid Layout：栅格布局--将窗口控件放入一个网格中，然后将它们合理地划分成若干行（row）和列（column），并把其中的每个窗口控件放置在合适的单元（cell）中，这里的单元指由行和列交叉所划分出来的空间。
• Form Layout：表单布局--控件以两列的形式布局在表单中，其中左列包含标签，右列包含输入控件。

进行布局有两种方式：

3.1 使用布局管理器布局

选中所有要布局的控件，在其中一个控件上右键弹出菜单，选择布局

选择水平布局后：

3.2 使用容器进行布局

所谓容器控件，就是指能够容纳子控件的控件。使用容器控件，目的是将容器控件中的控件归为一类，比有别于其他控件。其中，控件容器也可以对其子控件进行布局。

• 从左侧容器（Containers）导航栏拖入一个Frame空间，然后放入Label，LineEdit和Button。

  
  
  image.png

• 选中Frame控件，单击右键，选中布局->垂直布局。

  
  
  image.png
  
  

  布局结果：

  
  
  image.png

3.3 多层布局

多个布局还可以在进行组合，形成更大的布局格式。如图，2个水平布局，组合为垂直布局

4 信号和槽关联

信号（signal）和槽（slot）是Qt的核心机制。在创建事件循环之后，通过建立信号和槽的连接就可以实现对象之间的通信。当信号发射（emit）时，连接的槽函数将会自动执行。

在PyQt5中，信号和槽通过QObject.signal.connetct()连接。

所有从QObject类或其子类（如QWidget）派生的类都能够包含信号和槽。当对象改变其状态时，信号就由该对象发射出去。槽用于接收信号，但它们是普通的对象成员函数。多个信号可以与单个槽进行连接，单个信号也可以与多个槽进行连接。

4.1 通过Qt Designer编辑

实现简单的关闭窗体按钮
（1）选择Edit-编辑信号/槽

（3）操作结果

查看生成的py文件，会增加如下代码

# 注意，槽函数MainWindow.close 不加括号
self.pushButton.clicked.connect(MainWindow.close)

4.2 代码编辑

直接输入代码即可

self.pushButton.clicked.connect(MainWindow.close)

5 菜单栏与工具栏

MainWindow主窗口，主要包含菜单栏，工具栏和任务栏等。以下简单介绍几种使用：

5.1 菜单栏

输入文件(&F)，编辑(&E)加入菜单。

5.2 工具栏

• 使用Qt Designer默认生成的主窗口不显示工具栏，可以通过鼠标右键来添加工具栏

  
  
  image.png

• 动作编辑器中，新建addWinAction

  
  
  image.png
  
  
  image.png

• 并将addWinAction，拖入到工具栏中

  
  
  image.png

6 打包资源文件

到现在为止，我们的GUI还没有图标ico等资源。在Qt Designer中设计界面时不能直接添加图片和图标等资源，先需要在PyQt开发目录下编写.qrc文件。
（1）新建资源文件apprcc.qrc，添加如下内容

<!DOCTYPE RCC>
<RCC version="1.0">
    <qresource>
        <file alias="e1.png">ico/e1.png</file>
        <file alias="e2.png">ico/e2.png</file>
        <file alias="e10.png">ico/e10.png</file>
        <file alias="e11.png">ico/e11.png</file>
    </qresource>
</RCC>

D:\Anaconda3\Scripts\pyrcc5.exe apprcc.qrc -o apprcc_rc.py
Process finished with exit code 0

from PyQt5 import QtCore, QtGui, QtWidgets
import apprcc_rc

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        icon = QtGui.QIcon()
        icon.addPixmap(QtGui.QPixmap(":/e1.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        MainWindow.setWindowIcon(icon)

到此，简单的Qt Designer介绍完成。