python 使用pyqt5进行ui开发-2按钮

文档来源：https://www.jianshu.com/p/684f8343abe4

在实际操作中加入了自己遇到的问题和修改

窗口主要区域介绍

1.1 Widget Box（工具箱）

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

1.2 主窗口

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

1.3 对象查看器

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

1.4 属性编辑器

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

以下列举几个常用的属性

属性	含义	备注
objectName	控件对象名称
geometry	相对坐标系
sizePolicy	控件大小策略
minimumSize	最小宽度，高度
maximumSize	最大宽度，高度	如果想让窗口或控件大小固定，则可以设置minimumSize==maximumSize
font	字体
cursor	光标
windowTitle	窗口标题
windowsIcon/icon	窗口图标/控件图标
iconSize	图标大小
toolTip	提示信息
statusTip	任务栏提示信息
text	控件文本
shortcut	快捷键

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 使用布局管理器布局

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

选择水平布局后：

对象查看器中可以看到2个Button的父组件变为了QHBoxLayout

3.2 使用容器进行布局

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

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

   

  

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

   

  

   

  布局结果：

   

  

3.3 多层布局

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

4 信号和槽关联

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

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

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

所谓“信号”，简单理解就是点击Button会发出一个信号，然后我们期望点击能实现一个功能，这个功能需要封装在信号槽中，这样当发出点击信号时，就会执行信号槽中的方法。（信号槽这个翻译挺尬的，解释成事件可能更好理解）

4.1 通过Qt Designer编辑

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

（2）点击要编辑的控件，按住鼠标左键不放，拖动要接受者（Fom），这样就建立起了连接

拖动

建立连接

（3）操作结果

完成

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

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

4.2 代码编辑

直接输入代码即可

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

5 菜单栏与工具栏

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

5.1 菜单栏

点击在这里输入，然后输入文字，回车即可生成菜单栏。

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

文件菜单中，在加入打开，新建，关闭三个子菜单。子菜单可以通过动作编辑器中的Shortcut来添加快捷键。

5.2 工具栏

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

   

  

• 动作编辑器中，新建addWinAction

   

  

   

  

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

   

  

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>

（2）打开资源浏览器，并选择编辑操作

（3）编辑，选择上面创建的apprcc.qrc文件

（4）示例，给主窗口添加图标
在属性编辑器，点击选择资源

选择图标

预览

（5）使用扩展工具-Pyrcc转换.qrc文件为.py

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

（6）对于已经添加图标的.ui文件，使用扩展工具-PyUIC重新生成.py文件，则生成的新py文件中会将
apprcc_rc.py引入进来

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介绍完成。