莱夢1. 项目概述
最近在做一个很有意思的小项目 - 用Qt Designer设计一个调用YOLO目标检测的图形界面。这个需求其实挺常见的，很多做计算机视觉的朋友都需要一个简单的GUI来展示他们的检测模型。我自己也是从零开始摸索，现在把完整的实现过程分享给大家。
这个教程会从最基础的Qt Designer使用讲起，包括：
- 如何设计一个简洁的界面布局
- 如何设置按钮和显示区域
- 信号与槽的基本连接方法
- 如何将.ui文件转换为Python代码
- 最终与YOLO模型集成
整个过程我会尽量简化，只保留最核心的步骤，适合刚接触Qt的新手学习。最终我们会得到一个可以加载图片、运行检测并显示结果的基础界面，还能打包成exe分享给别人使用。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备
2.1 安装必要软件
首先需要准备好开发环境，这里我们需要：
- Python 3.7+ (推荐3.8)
- PyQt5
- Qt Designer (通常随PyQt5一起安装)
- Ultralytics (YOLOv8官方实现)
安装命令很简单：
bash复制pip install pyqt5 pyqt5-tools ultralytics
注意：如果遇到安装问题，可以尝试先创建一个干净的Python虚拟环境。PyQt5的版本建议使用5.15.x，比较稳定。
2.2 验证Qt Designer
安装完成后，检查Qt Designer是否可用。它通常位于：
code复制Python安装目录\Lib\site-packages\qt5_applications\Qt\bin\designer.exe
或者在Windows搜索栏直接搜索"designer"应该也能找到。打开后你会看到一个空白的界面设计窗口，这就是我们的画布了。
3. 界面设计实战
3.1 创建主窗口
打开Qt Designer后：
- 选择"Main Window"模板
- 将窗口大小调整为800x600（在属性编辑器中修改）
- 保存为"yolo_detector.ui"
3.2 添加基础控件
我们需要三个主要功能区域：
- 按钮区 - 用于触发各种操作
- 图片显示区 - 展示原始图片和检测结果
- 信息显示区 - 显示检测状态和结果
具体操作：
- 从左侧"Widget Box"中找到"Push Button"，拖拽三个到窗口中
- 分别重命名为：
- loadImageButton (加载图片)
- loadWeightsButton (加载模型)
- runDetectionButton (运行检测)
- 添加一个Label控件作为结果显示区域，命名为resultLabel
- 调整各控件位置和大小，建议使用布局管理器(Layout)而不是绝对定位
3.3 使用布局管理器
绝对定位(setGeometry)虽然简单，但不利于窗口缩放。推荐使用布局管理器：
- 选中所有按钮，右键选择"Lay out" → "Vertical Layout"
- 将Label和按钮布局整体放入一个水平布局
- 设置主窗口的中心布局
这样当窗口大小变化时，控件会自动调整位置和大小。
3.4 信号与槽连接
这是Qt的核心机制之一，简单理解就是"当A事件发生，执行B操作"。
在Qt Designer中：
- 点击上方工具栏的"Edit Signals/Slots"按钮
- 点击loadImageButton，拖出一条线到主窗口空白处
- 在弹出的配置窗口中：
- 发送者：loadImageButton
- 信号：clicked()
- 接收者：MainWindow
- 槽：可以暂时留空，我们稍后在代码中实现
重复这个过程为每个按钮添加clicked()信号连接。
4. 转换为Python代码
4.1 使用pyuic转换.ui文件
保存好.ui文件后，在命令行执行：
bash复制pyuic5 yolo_detector.ui -o ui_yolo.py
这会生成一个Python文件，其中包含我们设计的界面代码。不要直接修改这个文件，因为每次重新生成都会被覆盖。
4.2 创建主程序文件
新建一个main.py文件，内容如下：
python复制import sys
from PyQt5 import QtWidgets
from ui_yolo import Ui_MainWindow
class YOLODetector(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self):
super().__init__()
self.setupUi(self)
# 连接信号与槽
self.loadImageButton.clicked.connect(self.load_image)
self.loadWeightsButton.clicked.conne