手动开发一个TCP服务器调试工具（三）：使用 QWidget 构建 TCP 服务控制界面

本介绍如何基于 Qt Widgets 框架构建一个功能完整的 TCP 服务控制界面，实现 端口配置、连接管理、数据收发、实时状态显示 等核心功能的基础界面

📢 下一篇预告：

构建完整的UI与功能联合的 TCP 服务器应用

敬请期待！

下面可以粗略过一下即可，不太重要，本章仅仅搭建一个界面

✦ 1. 目标功能说明

界面控件组成

从界面截图出发，整理核心交互控件：

• 网络控制区：端口输入框（配置监听端口）、打开/关闭 按钮（启停 TCP 服务）、清空信息/清空接收 按钮（重置显示与统计）、消息提示开关（控制提示信息显示）。
• 显示选项区：复选框（显示发送 显示时间 显示接收，控制数据显示维度）、单选框（显示HEX，切换数据显示格式为十六进制/明文）。
• 统计区：4 个文本框，实时显示 收到字节 收到帧 发送字节 发送帧 计数。
• 数据收发区：5 组群发控件（下拉框、定时开关、间隔输入、HEX 开关、数据输入框、清空/发送 按钮），支持定时/立即、明文/十六进制数据发送。
• 显示区：信息交互（收发数据详情）和 消息提示（连接状态、错误信息）两个文本框。

用户交互流程

1. 服务启停：输入端口 → 点击 打开 启动 TCP 监听；点击 关闭 停止服务并断开连接。
2. 数据发送：选择群发类型 → 输入数据（或勾选 HEX 输入十六进制）→ 勾选 定时 并设置间隔（毫秒）→ 点击 发送 立即或定时发送数据。
3. 数据显示：根据 显示选项 控制：
   • 勾选 显示时间：每条数据前缀追加时间戳；
   • 勾选 显示发送/接收：区分数据方向；
   • 勾选 显示HEX：数据以十六进制格式显示（否则为明文）。
4. 状态反馈：消息提示 框实时显示连接事件（新连接、断开）和错误信息；统计区动态更新收发计数。

✦ 2. 项目结构与类设计

核心类分工

• MainWindow（继承 QWidget）：负责 界面构建、控件交互，通过信号槽与网络模块通信。
• TcpServerController（独立类）：封装 TCP 服务逻辑，包括监听、接受连接、数据收发，通过信号向 UI 反馈状态（新连接、数据收发、错误）。

✦ 3. 界面布局实现（代码方式）

布局策略：分层嵌套 + Splitter

通过 垂直布局（QVBoxLayout） 为主框架，将界面划分为 顶部控制区、中间显示区、底部群发区，关键区域用 QSplitter 实现可伸缩布局：

1. 顶部控制区（QHBoxLayout）：

   • 端口输入：使用 QSpinBox（范围 1~65535，确保端口合法性）；
   • 功能按钮：打开/关闭、清空信息/清空接收、消息提示开关 并列排布，通过 addStretch() 保证间距合理。

2. 中间显示区（QSplitter 垂直分割）：

   • 上半部分：信息交互 文本框（QPlainTextEdit，高效处理实时数据追加）；
   • 下半部分：消息提示 文本框（QPlainTextEdit，显示连接事件和错误）；
   • 通过 splitter->setSizes({300, 100}) 初始化上下区域比例，支持鼠标拉伸。

3. 底部群发区（QVBoxLayout）：

   • 每组群发控件：用 QHBoxLayout 包裹（下拉框、定时复选框、间隔 QSpinBox、HEX 单选框、数据 QLineEdit、清空/发送 按钮）；
   • 5 组控件垂直排列，通过 addSpacing() 增加组间间距，保持界面整齐。

✦ 4. 实时数据显示机制

核心思路：信号驱动 + 格式化输出

1. 数据格式化规则（动态响应显示选项）：

   • 时间戳：通过 QDateTime 生成当前时间，按需作为前缀。
   • 方向标记：根据 isSend 参数和复选框状态，追加 [发送] 或 [接收]。
   • HEX 转换：利用 QByteArray::toHex() 转换为十六进制字符串；明文模式下替换不可见字符（如 \r\n 保留，\x00 替换为 .）。

2. 高效显示：QPlainTextEdit 的优化
   QPlainTextEdit::appendPlainText 内部已做重绘优化，直接追加内容即可，避免手动调用 update() 导致性能问题。

3. 统计数据联动更新
   TcpServerController 维护收发计数变量，每次数据收发时发射信号（如 bytesReceivedChanged），UI 通过槽函数更新文本框：

✦ 总结

通过 分层布局 实现界面规整，信号槽解耦 分离 UI 与网络逻辑，格式化输出 处理实时数据，一个功能完整的 TCP 服务控制界面已初步成型。后续可扩展 多客户端管理（如连接列表、断开指定客户端）、数据解析插件（自定义协议解析）等高级功能，进一步提升实用性。