新建第一个窗口

首先打开vscode，新建一个我们的文件夹命名为test，里面再新建一个resources，在resources的里面再新建一个文件夹image来存放我们的图片，接下来在test目录下新建一个Main.py和MainWindow.py，接下来在Main.py下敲写我们的代码试一下

import sys
from PyQt5.QtWidgets import QApplication
from MainWindow import MainWindow

def main():
    app = QApplication(sys.argv)
    window = MainWindow()                #创建MainWindow窗口对象
    window.show()                         #显示窗口
    sys.exit(app.exec_())                 #退出程序

if __name__ == "__main__":
    main()

然后在MainWindow.py中创建我们的窗口

class MainWindow:
    def __init__(self):
        super().__init__()
        # 创建对象
        self.ui = Ui_MainWindow()
        # 初始化内容
        self.ui.setupUi(self)

        self.setWindowIcon(QIcon(":/image/33.png"))
        # 初始化ui
        self.init_ui()

        self.testWindow = TestWindow()
        self.testWindow.show()

    def init_ui(self):
        pass

这上面的代码设置的是我们窗口的类，那么界面在哪里？我们还没有。MainWindow.py中只是一个类，接下来我们在vscode中左边的窗口鼠标右键选中PYQT: New Form，这个时候就可以创建一个窗口了

接下来我们在弹出来的Qt Designer 的界面窗口中创建一个MainWindow，这样子一个窗口就创建出来了

这是 Qt Designer 的界面窗口。Qt Designer 是 Qt 框架下的可视化界面设计工具，主要用于快速创建 Qt 应用程序的用户界面。

各区域功能

• 左侧的 Widget Box（部件箱）：提供了丰富的界面组件，如布局（Layouts）、按钮（Buttons）、视图（Item Views 等）等，开发者可以将这些组件拖拽到中间的设计区域，来构建界面元素。
• 中间的设计区域：显示了一个名为 MainWindow 的窗口（处于未命名状态，显示为 untitled*），这里可以直观地摆放和调整各种界面部件的位置与大小，比如图中就有一个 “测试按钮” 被放置在其中。
• 右侧的面板区域
  • 对象查看器：展示当前界面中所有的对象及其所属的类，方便开发者查看界面的对象结构，如图中显示了 MainWindow、centralwidget、pushButton 等对象及其类。
  • 属性编辑器：用于编辑选中对象的属性，像对象的启用状态（enabled）、几何位置（geometry，包括坐标、宽度、高度等）等属性都可以在这里设置，图中就显示了 MainWindow 的相关属性。
  • 资源浏览器：用于管理界面中使用的资源，比如图片等资源可以在这里进行组织和调用。

通过 Qt Designer，开发者无需编写大量的界面代码，就能快速搭建出符合需求的 Qt 应用程序界面，提高了界面开发的效率。

这里我们往里面加一个push button并命名为测试按钮

然后我们将此窗口保存到resources下面，并命名为与我们的类相同的名字MainWindow.ui

当我们下次想要打开他的时候，这个时候我们在vscode中选中他右键选择PYQT：Edit In Designer就可以打开了

然后我们将这个设计的图形界面编译一下，这个时候我们设计的图形界面就会自动转化成一个python文件

接下来我们改一下MainWindow的代码

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from resources.Ui_MainWindow import Ui_MainWindow

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()  # 调用父类构造函数
        # 创建对象
        self.ui = Ui_MainWindow()
        # 初始化内容
        self.ui.setupUi(self) 
        # 初始化ui 
        self.init_ui()

    def init_ui(self):
        pass

运行后我们就可以获得我们设计的图形界面了

增加资源环境

如果我想显示一张图片

放置一个标签Label在中间，选中他并让他放在正中央，改名为text

然后我们想显示一张图片该怎么做，修改完保存后要记得重新编译，这样子才能生效

我们将一张图片放进我们的其中一个文件夹中，并命名为33.png，并复制这个图片的链接，比如我的这张图片的链接为：C:/Users/lenovo/Desktop/test/33.png

我们修改一下MainWindow的代码

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from resources.Ui_MainWindow import Ui_MainWindow

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()  # 调用父类构造函数
        # 创建对象
        self.ui = Ui_MainWindow()
        # 初始化内容
        self.ui.setupUi(self) 
        # 初始化ui 
        self.init_ui()

    def init_ui(self):
        self.ui.text.setPixmap(QPixmap("C:/Users/lenovo/Desktop/test/33.png"))  #设置图片路径
        

修改完后我们运行一下Main.py，会得到以下的结果

接下来我们改进一下，将我们的图片打包到工程里面，这样子才能满足用户的需求

在我们的资源目录resources下创建一个res.qrc文件，内容如下

有一个image，image里面有一个33.png

res.qrc

<RCC>
  <qresource prefix="/">
    <file>image/33.png</file>
  </qresource>
</RCC>

如果说我还有其他的资源文件，我们就加几个嘛

这样子我们的资源文件就创建好了，创建好了后我们还要编译，那么我们该怎么编译？

然后我们编写我们的脚本，这里直接用作者给的脚本就可以了

其中"resources/res.qrc",是你资源的路径

-o是编译

"res_rc.py"是编译后存放的路径，这里一定要注意要跟Main.py和MainWindow.py放在同一路径下

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build Resources",
            "type": "shell",
            "command": "pyrcc5",
            "args": [
                "resources/res.qrc",   
                "-o",
                "res_rc.py"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

然后按住ctrl+shift+b 点击配置任务就可以自动完成任务了

然后我们修改一下我们的MainWindow的代码，把我们之前的绝对路径换成我们的资源路径

import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from resources.Ui_MainWindow import Ui_MainWindow
import res_rc

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()  # 调用父类构造函数
        # 创建对象
        self.ui = Ui_MainWindow()
        # 初始化内容
        self.ui.setupUi(self) 
        # 初始化ui 
        self.init_ui()

    def init_ui(self):
        self.ui.text.setPixmap(QPixmap(":/image/33.png"))

这样子我们就可以得到我们资源路径的图片了，比如我们要11.png的资源路径图片

这就是我们的一个非常完整的一个工程模板，以后我们创建一个非常复杂的工程的话就可以在这个工程的基础上面加东西就可以了