提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

大三小伙要在备战考研的一年内利用闲余时间从零开始学习 PyQt 并逐步构建一个类似 Visio 风格的低代码软件项目去实现神经网络的拖拽式搭建。先从最基础的内容开始。

---

学习计划

1. 环境搭建：安装必要的工具和库。
2. PyQt 基础知识：
   • 如何创建一个简单的窗口。
   • 添加按钮、标签等基础组件。
   • 布局管理（排列组件）。
3. 高级功能：
   • 设计拖拽式界面（核心功能）。
   • 绘图和连线功能（实现类似 Visio 的画布）。
   • 多窗格布局和选项卡（实现类似 PyCharm 的界面）。
4. 实际应用：
   • 集成代码生成功能。
   • 导出设计为图片和对应网络代码。
   • 打包为 EXE 文件。

---

第 1 步：环境搭建

1.1 安装 Python

• 从 Python 官网 下载并安装 Python（建议版本 3.8 及以上）。我暂时用的3.10。
• 安装时勾选 “Add Python to PATH”。

1.2 安装 PyQt

PyQt 是一个基于 Qt 库的 Python GUI 框架。

安装命令：

pip install PyQt6

验证安装：

在终端或命令行中运行以下代码，查看是否安装成功：

import PyQt6
print(PyQt6.__version__)  # 输出版本号表示安装成功

---

第 2 步：PyQt 基础知识

2.1 创建第一个窗口

PyQt 的核心类是 QApplication 和 QMainWindow。我们可以从这些类开始。

代码示例：简单窗口

创建一个基础窗口并运行。

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow

# 创建主窗口类
class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("我的第一个 PyQt 窗口")
        self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小

# 创建应用程序
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())

运行结果：

• 打开一个 800x600 的基础窗口，标题为“我的第一个 PyQt 窗口”。
• 程序运行后，关闭窗口即可结束。
  

---

2.2 添加基础组件

我们在窗口中添加按钮、标签等基础组件。

代码示例：添加按钮和标签

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QLabel, QPushButton

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("添加组件示例")
        self.setGeometry(100, 100, 400, 300)

        # 添加标签
        self.label = QLabel("欢迎使用 PyQt！", self)
        self.label.setGeometry(100, 50, 200, 50)  # 设置标签的位置和大小

        # 添加按钮
        self.button = QPushButton("点击我", self)
        self.button.setGeometry(100, 150, 100, 50)
        self.button.clicked.connect(self.on_button_click)  # 按钮点击事件

    def on_button_click(self):
        self.label.setText("按钮被点击了！")

# 创建应用程序
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())

运行结果：

• 窗口中有一个标签和一个按钮。
• 点击按钮后，标签文字会变成“按钮被点击了！”。
  

---

2.3 布局管理

当组件较多时，手动设置每个组件的位置非常麻烦。PyQt 提供了 布局管理器 来自动管理组件的排列。

常用布局管理器：

1. QVBoxLayout（垂直排列）。
2. QHBoxLayout（水平排列）。
3. QGridLayout（网格排列）。

代码示例：使用垂直布局管理器

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QPushButton, QLabel

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("布局管理示例")
        self.setGeometry(100, 100, 300, 200)

        # 创建主控件和布局
        central_widget = QWidget()  # 主控件
        layout = QVBoxLayout()  # 垂直布局
        central_widget.setLayout(layout)  # 将布局设置到主控件

        # 添加组件到布局
        self.label = QLabel("这是一个标签")
        layout.addWidget(self.label)

        button = QPushButton("点击更改标签")
        button.clicked.connect(self.change_label_text)
        layout.addWidget(button)

        self.setCentralWidget(central_widget)  # 将主控件设置为窗口中央控件

    def change_label_text(self):
        self.label.setText("标签已更改！")

# 创建应用程序
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())

运行结果：

• 标签和按钮会按照垂直方向自动排列。
• 点击按钮会修改标签文字。
  

---

2.4 多窗格布局（Splitter）

在实际项目中，我们需要实现类似 PyCharm 的多窗格布局，可以使用 QSplitter。

代码示例：多窗格布局

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QSplitter, QTextEdit, QListWidget
from PyQt6.QtCore import Qt

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("多窗格布局示例")
        self.setGeometry(100, 100, 800, 600)

        # 创建分割器
        splitter = QSplitter(Qt.Orientation.Horizontal, self)

        # 左侧：列表
        list_widget = QListWidget()
        list_widget.addItems(["项目1", "项目2", "项目3"])
        splitter.addWidget(list_widget)

        # 右侧：文本编辑器
        text_edit = QTextEdit()
        splitter.addWidget(text_edit)

        self.setCentralWidget(splitter)  # 设置分割器为中央控件

# 创建应用程序
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())

运行结果：

• 左侧是一个列表控件，右侧是一个文本编辑器。
• 中间的分割条可以拖动调整两部分的大小。
  

---

小结

通过以上内容，掌握 PyQt 的基础知识：

1. 如何创建窗口。
2. 如何添加按钮、标签等基础组件。
3. 使用布局管理器自动排列组件。
4. 创建多窗格布局。