QT Designer + VS Code + PyQt5 安装教程

最新推荐文章于 2024-09-23 14:46:42 发布

置顶 iN651

最新推荐文章于 2024-09-23 14:46:42 发布

阅读量1w

点赞数 34

分类专栏： PyQt5 学习笔记文章标签： python pyqt5 vscode

本文链接：https://blog.csdn.net/weixin_45676151/article/details/119117035

版权

PyQt5 学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

QT Designer + VS Code + PyQt5 安装教程

一、安装环境
二、VS Code安装及配置
三、Qt Designer使用
四、绘制一个简单UI进行测试

最近开始学习PyQt5,看了很多大佬的回答，但是总感觉有些欠缺，于是整理了一下自己的入门经历。首先从各种软件搭建以及环境配置开始，之后会慢慢更新自己的学习过程以及案例分享。
本篇文章先介绍如何安装相关软件以及环境搭建。

一、安装环境

Windows 10
Python 3.9.2
Qt Designer
VS Code 1.58.1
PyQt5

二、VS Code安装及配置

1.下载安装包

首先在官网下载软件安装包：官网下载地址
根据自己的操作系统，选择合适的安装包。
User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的VS Code。
System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)

此处我选择的是64位Windows下的安装包。
在这里插入图片描述

2.安装软件

双击软件直接运行进入安装状态。选择同意此协议，然后点击下一步。

在这里插入图片描述
选择安装路径，然后下一步。

为了方便找到安装的VS Code软件，这里勾选创建桌面快捷方式。自动将VS Code添加到环境变量，这里默认勾选了添加到PATH，点击下一步。
在这里插入图片描述
等待安装成功。

3.VS Code基本配置

双击桌面图标运行VS Code后，进入开发界面，开发前段项目还需要安装一些必须的软件和便于开发常用的插件。
有需要的可以安装简体中文包，安装完成后重启软件即可。
在这里插入图片描述
1）VS Code安装Python拓展包。

在这里插入图片描述

2）选择一个python解释器(前提是已经安装好python)。
快捷键ctrl+shift+p，输入“python:”,选择下图所示的选项，选择Python解释器（没看到就往后翻翻），然后就出现可选的解释器。选择解释器会将python.pythonPath工作空间设置中的值设置为解释器的路径。

在这里插入图片描述
点击选择解释器，选择相应的工作空间。

在这里插入图片描述

4.VS Code配置PyQt5和designer

1）安装pyqt5和pyqt5-tools。点击软件按上方菜单栏中的终端->新终端，依次输入

pip install PyQt5

pip install PyQt5-tools

速度慢的话可以选择镜像下载(以清华大学镜像为例)

pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple/

pip install PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple/

在这里插入图片描述
2）安装完成后，继续安装pyqt integration扩展。

在这里插入图片描述
到这一步，PyQt5 算是安装完成了。

3）可以通过win+s 搜索designer检查是否安装成功，如果出现了designer图标，则说明安装成功了。
4）或者在cmd中输入pyuic5，如果返回“Error: one input ui-file must be specified”说明安装成功。
5）尝试配置pyqt integration。
选择文件->首选项->设置,搜索pyqt,拉到最下方，对 designer的路径进行添加。找到designer的安装路径，这个路径一般是在python安装目录下的

D:\python\Lib\sitepackages\pyqt5_tools\designer.exe

如果没有的话，可以在下面这个里面找找

D:\python\Lib\site-packages\pyqt5_tools\Qt\bin\designer

我的是在下面这个目录中。

D:\python\Lib\site-packages\qt5_applications\Qt\bin

在这里插入图片描述
路径添加成功。

6）新建一个py文件，复制以下代码到新建的py文件中。

import sys
from PyQt5 import QtWidgets,QtCore
app = QtWidgets.QApplication(sys.argv)
widget = QtWidgets.QWidget()
widget.resize(360,360)
widget.setWindowTitle("First")
widget.show()
sys.exit(app.exec_())

点击运行，如果出现了下方的窗口，则说明环境配置成功。

在这里插入图片描述

三、Qt Designer使用

在上述步骤中已经安装了pyqt5以及pyqt5-tools,所以 designer.exe 就在tools中，这里需要我们先找到designer的具体位置，可以通过win+s 搜索designer直接运行，如果搜不到的话，可以去python安装目录下的这几个路径中找找。

D:\python\Lib\site-packages\pyqt5_tools\

D:\python\Lib\site-packages\pyqt5_tools\Qt\bin\

D:\python\Lib\site-packages\qt5_applications\Qt\bin

在这里插入图片描述
为了方便可以创建快捷方式到桌面。
初次启动会弹出这个“新建窗体”窗口，一般来说选择“Main Window”然后点击“创建”就可以了。下方有个“启动时显示这个对话框” 选项，如果不想每次启动都看到这个“新建窗体”窗口，可以取消勾选。
在这里插入图片描述
下面是Qt designer主界面以及简单介绍：

左边的 “Widget Box” 是各种可以自由拖动的组件
中间的 “ MainWindow - untitled” 窗体就是画布
右上方的 “Object Inspector” 可以查看当前ui的结构
右边中部的 "Property Editor"可以设置当前选中组件的属性
右下方的 “Resource Browser” 可以添加各种素材，比如图片，背景等等

在这里插入图片描述

四、绘制一个简单UI进行测试

编写GUI的方法有两种，第一种就是纯代码，上面这个就是实现简单窗口的例子，直接在VS Code中编写运行即可。但是这样比较麻烦，还有一种比较简单快捷的方法就是使用Qt Designer,下面展示一个简单的案例。

新建一个窗口。添加一个简单的标签Label并编辑文本。
同样的可继续添加单行编辑框和按钮
修改窗口标题，选中右上方的"Object Inspector"中的“MainWindow”，然后在右侧中部的"Property Editor"中找到“windowTitle”这个属性，在Value这一栏进行修改，修改完记得敲击回车。将MainWindows改为Welcome。
预览。菜单栏的Form -> Preview ->Preview in。或者快捷键win+R直接预览。
保存。保存为Welcome.ui文件。
生成python代码。这里介绍两种生成方法
1）进入cmd,输入命令

pyuic5 -o Welcome_ui.py Welcome.ui

Welcome_ui.py 是生成后的python文件名
Welcome.ui 是前面的ui文件名
在这里插入图片描述

回车之后就可以在相同目录下看到生成的py文件。
在这里插入图片描述

在VS Code中打开此文件，大概是下面这个样子。
在这里插入图片描述

2）或者直接进入VS Code ,打开ui文件所在的文件夹，选中Welcome.ui，右击选择PYQT : Compile Form，即可看到生成的.py文件
在这里插入图片描述

但是这个py文件是无法执行的，因为没有程序入口。

所以在同一个目录下新建一个main.py,并输入以下内容：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
import Ui_Welcome  # 调用生成的.py文件

if __name__ == '__main__':
    app = QApplication(sys.argv)
    MainWindow = QMainWindow()
    ui = Ui_Welcome.Ui_mainWindow()  
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())