开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> C++知识库 -> QT Designer + VS Code + PyQt5 安装教程 -> 正文阅读

[C++知识库]QT Designer + VS Code + PyQt5 安装教程

最近开始学习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_())