PyQt5⼊门教程
0x00 安装环境清单
我使⽤的环境如下:
Windows 10 (Build 17763)
Python 3.7.2
VSCode 1.33.0
PyQt5
Qt Designer
如果你使⽤的是OSX或者Linux,请⾃⾏替换教程中的⼀些操作。
本⽂并不讨论Python和VSCode的安装,如果没有VSCode,你可以⽤各种同类IDE替代或者安装它。
本⽂不讨论多Python共存,毕竟Python2.7在2020年就要退役了,⽽且我本⼈也没这需求。
0x01 安装PyQt5
下⾯直接使⽤pip来安装PyQt5,此处可能是pip/pip3,或者两者皆可,后⾯不再重复
直接pip安装PyQt5
pip install PyQt5
1
由于Qt Designer已经在Python3.5版本从PyQt5转移到了tools,因此我们还需要安装pyqt5-tools
pip install pyqt5-tools
1
到这⼀步,PyQt5就安装完成了,你可以通过下⾯若⼲可选的操作来检查是否已经安装成功:
Win+S呼出Cornata主⾯板(搜索框),输⼊designer,如果看到跟下图类似的结果说明PyQt Designer已经被安装
在cmd中输⼊pyuic5,如果返回“Error: one input ui-file must be specified”说明安装成功。
0x02 初识Qt Designer
注:Qt Designer的界⾯是全英⽂的,幸运的是有⽅法,不过因为我本⼈⽤不上,所以如果有这⽅⾯需求可以⾃⾏搜索。
我⽐较习惯⽤Win+S呼出Cornata主⾯板(搜索框)来启动各种应⽤,那么这⾥就是在搜索框中输⼊designer并敲回车,就能够启动Qt Designer了。
java为什么下载不了初次启动会弹出这个“New Form”窗⼝,⼀般来说选择“Main Window”然后点击“Create”就可以了。下⽅有个“Show this Dialogue on Startup”的checkbox,如果不想每次启动都看到这个“New Form”窗⼝,可以取消勾选。
创建“Main Window”之后,我们会看到如下画⾯
下⾯就来简单介绍下整个画⾯的构成:
左侧的“Widget Box”就是各种可以⾃由拖动的组件
中间的“MainWindow - untitled”窗体就是画布
右上⽅的"Object Inspector"可以查看当前ui的结构
右侧中部的"Property Editor"可以设置当前选中组件的属性
右下⽅的"Resource Browser"可以添加各种素材,⽐如图⽚,背景等等,⽬前可以不管
⼤致了解了每个板块之后,就可以正式开始编写第⼀个UI了
0x03 HelloWorld!
注:从这⾥开始,相关代码可以在/assets/code/pyqt5中到
注:本⽂⽤到的代码都在我github,就不在CSDN这⾥上传了
通常来说,编写GUI有两种⽅法:第⼀种就是直接使⽤⽅便快捷的Qt Designer,第⼆种就是写代码。
在有Qt Designer的情况下,是完全不推荐费时费⼒去⼿写GUI代码的。Qt Designer可以所见即所得,并且可以⽅便的修改并做出各种调整。
按照惯例,我们先来实现⼀个能够显⽰HelloWorld的窗⼝。
1)添加⽂本
python入门教程资料在左侧的“Widget Box”栏⽬中到“Display Widgets”分类,将“Label”拖拽到屏幕中间的“MainWindow”画布上,你就获得了⼀个仅⽤于显⽰⽂字的⽂本框,如下图所⽰。
2)编辑⽂本
双击上图中的“TextLabel”,就可以对⽂本进⾏编辑,这⾥我们将其改成“HelloWorld!”,如下图所⽰。如果⽂字没有完全展⽰出来,可以⾃⾏拖拽空间改变尺⼨。
特别提醒,编辑完⽂本之后记得敲击回车令其⽣效!
3)添加按钮
使⽤同样的⽅法添加⼀个按钮(PushButton)并将其显⽰的⽂本改成“HelloWorld!”,如下图所⽰。
4)修改窗⼝标题
下⾯修改窗⼝标题。选中右上⽅的"Object Inspector"中的“MainWindow”,然后在右侧中部的"Property Editor"中到“windowTitle”这个属性,在Value这⼀栏进⾏修改,修改完记得敲击回车。
5)编辑菜单栏
注意到画布的左上⽅有个“Type Here”,双击它即可开始编辑菜单栏。菜单栏⽀持创建多级菜单以及分割线(separator)。我随意创建了⼀些菜单项⽬,如下图所⽰。
6)预览
使⽤快捷键Ctrl+R预览当前编写的GUI(或者从菜单栏的Form > Preview / Preview in进⼊)
7)保存
如果觉得完成了,那就可以保存成*.ui的⽂件,这⾥我们保存为HelloWorld.ui。为了⽅便演⽰,我将⽂件保存到D盘。
8)⽣成Python代码
使⽤cmd将⽬录切到D盘并执⾏下⾯的命令。请⾃⾏将下⾯命令中的name替换成⽂件名,⽐如本例中的“HelloWorld.ui”
pyuic5 -o name.py name.ui
1
⽣成的代码应该类似下图所⽰
9)运⾏Python代码
此时尝试运⾏刚刚⽣成的“HelloWorld.py”是没⽤的,因为⽣成的⽂件并没有程序⼊⼝。因此我们在同⼀个⽬录下另外创建⼀个程序叫做“main.py”,并输⼊如下内容。在本例
中,gui_file_name就是HelloWorld,请⾃⾏替换。
import sys
from PyQt5.QtWidgets import QApplication, QMainWindowtelnet什么意思
import gui_file_name
if __name__ == '__main__':
app = QApplication(sys.argv)
MainWindow = QMainWindow()
ui = gui_file_name.Ui_MainWindow()
ui.setupUi(MainWindow)
MainWindow.show()
<_())
1
2
3
4
5
6
7
8
9
unity3d简单小游戏脚本
10
11
12
然后运⾏“main.py”,你就能看到刚刚编写的GUI了!
10)组件⾃适应
如果你刚刚尝试去缩放窗⼝,会发现组件并不会⾃适应缩放,因此我们需要回到Qt Designer中进⾏⼀些额外的设置。
点击画布空⽩处,然后在上⽅⼯具栏到grid layout或者form layout,在本例中我们使⽤grid layout。两种layout的图标如下图所⽰。
顺带⼀提,上图中layout的左边有三条横线以及三条竖线的图标,这两个是⽤于对齐组件,⾮常实⽤。
设置grid layout后,我们使⽤Ctrl+R预览,这次组件可以⾃适应了!因为我们已经将UI(HelloWorld.py/HelloWorld.ui)跟逻辑(main.py)分离,因此直接重复步骤7-8即可完成UI的更新,⽆需改动逻辑(main.py)部分。
0x04 Interaction
刚刚写的HelloWorld中,我们设置的按钮(PushButton)是没有实际作⽤的,因为我们并没有告诉这个按钮应该做什么。实际上,要让这个按钮做点什么只需要增加⼀⾏代码就可以了。
1)获取按钮id
打开HelloWorld.ui,在designer中选中对应的按钮,从“Property Editor”中可以得知这个按钮的“objectName”叫做“pushButton”,如下图所⽰。
2)设置触发
Qt中有“信号和槽(signal and slot)”这个概念,不过⽬前⽆需深究,也⽆需在Designer中去设置对应按钮的“信号和槽”,直接在“main.py”中“MainWindow.show()”的后⾯加⼊下⾯这样的⼀⾏代码
ui.t(click_success)
1
下⾯简单解释下这⾏代码
pushButton就是刚刚获取的按钮id
clicked就是信号,因为是点击,所以我们这⾥⽤clicked
click_success就是对应要调⽤的槽,注意这⾥函数并不写成click_success()
3)设置函数
既然刚刚设置了按钮的触发并绑定了⼀个函数click_success,我们就要在“main.py”中实现它。⽰例如下
def click_success():
print("啊哈哈哈我终于成功了!")
1
2
4)运⾏!
UI跟逻辑分离的好处就在这⾥,我们这次不⽤去管“HelloWorld.py”了,直接运⾏修改完的“main.py”。点击按钮,这次你会发现在控制台中有了我们预设的输出。
0x05 Conversion
这次我们来进⾏实战演练,编写⼀个带GUI的汇率转换器。
1)设计UI
通过上⾯的讲解,你应该能够毫⽆压⼒的设计上⾯这样的UI并获得对应的代码。如果不⾏,那么不建议继续往下阅读,应当回头复习。
2)传参
现在我们有了GUI的代码以及上⼀节中使⽤的“main.py”,我们可以开始编写这个汇率转换器的逻辑部分。
在上⼀节,我们介绍了如何让按钮响应点击操作,但是并没有接受任何参数,⽽且只是在控制台输出。但是,上⼀节中说明了并不能通过正常的⽅式进⾏传参。因此,对于传参,有两种解决⽅案,⼀种是使⽤lambda,还有⼀种是使⽤functool.partial。在接下来的环节中我们会使⽤partial。
partial的⽤法如下所⽰:
partial(function, arg1, arg2, ......)
1
既然使⽤partial传参,那么我们就要在程序(main.py)的头部加上下⾯这⾏。
from functools import partial
1
然后我们把上⼀节中的按钮触发那⾏代码修改成下⾯这样。
ui.t(partial(convert, ui))
1
3)编写convert函数
windowsserver能日常用吗⾸先,我们要获取⽤户输⼊的数字。为了使得教程简洁易懂,我们这次只讲解单向的汇率转换。既然是单项的转换,那么我们只需要获取左侧的⽂本框id。在本例中,左侧的⽂本框id为lineEdit。如果你对此感到⼀头雾⽔,请停下并回头复习。
获取⽂本使⽤的是text()⽅法,因此读取⽤户输⼊的代码如下
input = ()
1
接着我们进⾏汇率转换,注意这⾥要进⾏类型转换
result = float(input) * 6.7
1
最后我们让右边的⽂本框显⽰结果
ui.lineEdit_2.setText(str(result))
1
下⾯是convert函数的代码
def convert(ui):
input = ()
result = float(input) * 6.7同望软件安装教程
ui.lineEdit_2.setText(str(result))
1
2
3
4
⼀个简单的汇率转换器就这样诞⽣了!
那么,如何知道⼀个组件都有什么⽅法呢?直接去查看就可以了。本节使⽤到的lineEdit的相关⽅法在