手动开发一个串口调试工具（三）：基于 Qt Widgets 搭建串口调试界面

在上一篇中，我们通过 QCoreApplication 构建了一个基础的串口收发控制台程序，并实现了周期发送、十六进制转换和数据读取等核心功能。本篇将基于此逻辑，进一步将其封装为一个图形化界面程序，借助 Qt Widgets 提供的控件搭建完整的串口调试助手界面。

一、界面功能概述

该调试助手界面涵盖以下几个关键区域：

二、控件讲解与布局选择

1️⃣ 串口配置区

使用控件：

• QLabel：显示“串口号”、“波特率”等提示文字
• QComboBox：用于列出并选择参数项（如端口号、波特率等）

设计理由：

• 下拉框可以有效防止用户输入错误；
• 通过 QSerialPortInfo::availablePorts() 实时获取系统串口信息；
• 使用 addItem(QString, QVariant) 可将显示值与枚举值绑定。

📌 参数填充代码示例：

// 填充串口选项
foreach (const QSerialPortInfo &info, QSerialPortInfo::availablePorts()) {
    ui->portNameComboBox->addItem(info.portName());
}

// 填充波特率
ui->baudRateComboBox->addItem("9600", QSerialPort::Baud9600);
ui->baudRateComboBox->addItem("19200", QSerialPort::Baud19200);
ui->baudRateComboBox->addItem("38400", QSerialPort::Baud38400);
ui->baudRateComboBox->addItem("115200", QSerialPort::Baud115200);
ui->baudRateComboBox->setCurrentIndex(0);

// 填充数据位
ui->dataBitsComboBox->addItem("5", QSerialPort::Data5);
ui->dataBitsComboBox->addItem("6", QSerialPort::Data6);
ui->dataBitsComboBox->addItem("7", QSerialPort::Data7);
ui->dataBitsComboBox->addItem("8", QSerialPort::Data8);
ui->dataBitsComboBox->setCurrentIndex(3); // 默认8位数据

// 填充停止位
ui->stopBitsComboBox->addItem("1", QSerialPort::OneStop);
ui->stopBitsComboBox->addItem("1.5", QSerialPort::OneAndHalfStop);
ui->stopBitsComboBox->addItem("2", QSerialPort::TwoStop);
ui->stopBitsComboBox->setCurrentIndex(0);

// 填充校验位
ui->parityComboBox->addItem("None", QSerialPort::NoParity);
ui->parityComboBox->addItem("Even", QSerialPort::EvenParity);
ui->parityComboBox->addItem("Odd", QSerialPort::OddParity);
ui->parityComboBox->addItem("Mark", QSerialPort::MarkParity);
ui->parityComboBox->addItem("Space", QSerialPort::SpaceParity);
ui->parityComboBox->setCurrentIndex(0);

2️⃣ 串口控制按钮区

使用控件：

• QPushButton：用于“打开串口”、“关闭串口”、“清空接收框”

设计理由：

• 明确直观，结合信号槽机制控制串口对象行为。

📌 绑定示例：

connect(ui->openButton, &QPushButton::clicked, this, &MainWindow::openSerialPort);

3️⃣ 数据接收显示区

使用控件：

• QTextEdit：展示接收数据内容
• QLabel：文字标识“信息接收”

设计理由：

• 多行显示、可滚动、支持颜色高亮；
• 设置只读，防止误操作。

📌 示例：

ui->receiveEdit->setReadOnly(true);

4️⃣ 状态显示与选项区

使用控件：

• QRadioButton：控制“显示时间”、“显示HEX”、“显示发送”、“显示接收”
• QLineEdit（只读）：显示接收字节、帧数等
• QGroupBox：对功能分组显示

设计理由：

• QGroupBox 提升界面组织性；
• 单选框互斥控制展示选项；
• 实时更新统计信息，增强可视性。

5️⃣ 数据发送控制区域

使用控件：

• QLineEdit：输入待发送内容
• QRadioButton：HEX / ASCII 模式切换
• QPushButton：发送按钮

设计理由：

• 简单交互逻辑清晰；
• 使用 QSerialPort::write() 发送数据。

📌 示例代码：

QByteArray data = ui->sendLineEdit->text().toUtf8();
serialPort->write(data);

三、界面信号槽连接逻辑

四、运行效果展示

运行程序后，用户可进行如下操作：

✅ 自动列出所有可用串口
✅ 设置通信参数后点击“打开”建立连接
✅ 接收内容实时显示，可选 HEX 和时间戳
✅ 支持 ASCII 或 HEX 方式发送
✅ 显示接收/发送字节数与帧数统计

📌 下一篇预告

《手动开发一个串口调试工具（四）：功能+界面融合,完整开发串口调试助手》