文档来源: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介绍完成。