在上一篇中，我們通過 QCoreApplication 構建了一個基礎的串口收發控制臺程序，并實現了周期發送、十六進制轉換和數據讀取等核心功能。本篇將基于此邏輯，進一步將其封裝為一個圖形化界面程序，借助 Qt Widgets 提供的控件搭建完整的串口調試助手界面。

---

一、界面功能概述

該調試助手界面涵蓋以下幾個關鍵區域：

功能區域	描述
串口配置區	選擇串口號、波特率、數據位、校驗位、停止位等通信參數
串口控制按鈕區	控制串口打開/關閉，清除接收數據
數據接收顯示區	實時顯示串口接收內容，支持 ASCII/HEX 格式
數據發送區	輸入并發送數據，支持 ASCII 或 HEX 格式
狀態選項與統計區	顯示發送/接收選項、時間戳控制、接收字節數/幀數等統計信息

---

二、控件講解與布局選擇

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);

---

三、界面信號槽連接邏輯

操作	控件	對應信號槽函數
打開串口	openButton	openSerialPort()
接收數據處理	QSerialPort	readyRead() → readData()
周期性自動發送	QTimer	timeout() → sendData()
清空接收框	clearButton	receiveEdit->clear()
模式切換（HEX）	radioButton	修改接收/發送解析方式

---

四、運行效果展示

運行程序后，用戶可進行如下操作：

? 自動列出所有可用串口
? 設置通信參數后點擊“打開”建立連接
? 接收內容實時顯示，可選 HEX 和時間戳
? 支持 ASCII 或 HEX 方式發送
? 顯示接收/發送字節數與幀數統計

---

📌 下一篇預告

《手動開發一個串口調試工具（四）：功能+界面融合,完整開發串口調試助手》