项目介绍
串口调试助手是一款用于串口通信调试的工具，它可以帮助开发人员发送和接收串口数据，主要用于嵌入式开发、工业控制、物联网设备开发等领域。
主要功能包括：
-
数据收发：可以实时发送和接收串口数据，并显示在界面上。
-
数据可视化：支持以十六进制形式显示数据，方便调试。
-
COM口管理：仅支持桌面端使用，轻松管理多个串口设备。
该工具以图形化界面呈现，操作简单，适用于需要进行串口通信测试和调试的场景。
平台支持
-
Windows
-
macOS
AiFlutter市场链接：串口调试助手
串口调试助手源码下载：源码下载
平台实现步骤
一、注册登录
打开 低代码平台登录网页 ，使用微信快捷登录或者扫描二维码登录。
二、创建项目
1. 点击【新增项目】>【手动添加】，在平台内部创建项目
2. 在跳出的弹窗中输入项目名称、项目描述，建议结合项目功能描述命名，便于检索
3. 输入完成后点击确定
三、页面设计
效果图
实现流程
1. 点击已经创建好的项目进入到操作界面，默认会存在一个HomePage页面，操作界面相关详情可查看教程 操作界面， 在【
页面管理】中单击HomePage页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下
| 名称 | 内容 |
|---|---|
| 页面描述 | 整个页面的布局可以是垂直分区的，上半部分是数据接收区，下半部分是数据发送区。 |
| 功能详情 | 1. 在页面初始化时，扫描串口设备，将得到的串口设备列表进行存储并渲染页面 2. 用户在下拉菜单中选择串口设备进行连接 3. 接收数据，连接成功后，会监听数据流并将收到的数据进行存储 4. 发送数据，用户在输入框中输入16进制数据后点击发送即可 5. 实时渲染，一旦有数据过来则进行一次页面构建，保证数据实时刷新 6. 支持设备插拔，设备插拔后依然能够识别到设备并进行连接，不需要重新启动程序 |
2. 在【页面管理】中单击HomePage页面，在右侧的属性编辑器中添加页面变量
需要定义的变量如下
| 变量名称 | 变量类型 | 是否为数组 | 默认值 | 变量描述 |
|---|---|---|---|---|
| serialPort | Var | 否 | 与串口设备通信的封装类对象 | |
| data | String | 否 | 发送串口数据的内容 | |
| res | Map | 是 | 用来存储串口设备数据的载体 | |
| _dropDownValue | String | 否 | COM1 | COM口下拉框选中值 |
| availablePorts | String | 是 | 当前系统可用的COM口列表 |
操作成功如下
3. 添加页面初始化动作，在右侧的属性编辑器中点击【动作】> 【打开】
在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下
（1）动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【拔出监听】，添加customCode1自定义代码块并选择
（2）动作类型 --【自定义代码块】，添加自定义代码块customCode1并选择
customCode1内容如下
void function(){if(Platform.isAndroid){return;}// 桌面串口初始化availablePorts = SerialPort.availablePorts;print("availablePorts==== ${availablePorts}");if (availablePorts.isEmpty) {return;}_dropDownValue = availablePorts[0];setState(() {});
}操作成功如下
4. 开启顶部导航栏
（1）点击页面编辑窗口右上角的【
顶部导航栏】并开启，配置顶部导航栏背景色为 #FF006FFF
（2）从【
小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 串口调试助手 |
| 文本颜色 | #FFFFFFFF |
| 文本大小 | 18 |
5. 页面内容设计
（1）从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 无限大 |
| 高 | 700 |
| 背景颜色 | #00C8C8C8 |
| 内边距 | 10 |
（2）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到页面编辑窗口内的【容器小部件】中
（3）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【上下布局小部件】中
（4）从【小部件面板】> 【表单元素】中选择【下拉菜单小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 第一个选择框绑定变量 | _dropDownValue |
| 第二个选择框绑定变量 | avaliablePorts |
（5）从【小部件面板】> 【基本元素】中选择【条件生成器小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中选择变量serialPort
（6）当条件 serialPort == null，勾选展示此界面，从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【条件生成小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 50 |
| 高 | 40 |
| 背景颜色 | #FF006FFF |
从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 连接 |
| 字体颜色 | #FFFFFFFF |
按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下
-
动作类型 --【自定义代码块】，添加customCode3自定义代码块并选择
-
动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【接收数据】，添加customCode2自定义代码块并选择
customCode2内容如下
void function(param){// 数据接收 res.add({"type": "接收","data": param.join(),"time": DateFormat("HH:mm:ss").format(DateTime.now()), }); setState(() {});
}customCode3内容如下
void function(){try {serialPort?.close();serialPort = SerialPort(_dropDownValue);if (serialPort == null) {print("打开串口失败");EasyLoading.showError("打开串口失败"); return;}SerialPortConfig config = serialPort?.config ?? SerialPortConfig();config.baudRate = 115200; serialPort?.openReadWrite();serialPort?.config = config;print("打开串口成功");} catch (e) {print("打开串口失败");serialPort?.close();serialPort = null;EasyLoading.showError("检测到串口故障，错误：UnsupportedOperationError ${e.toString().substring(e.toString().length - 10)}");}setState(() {});
}（7）当条件 serialPort != null，勾选展示此界面，从【小部件面板】-> 【常用元素】中选择【按钮小部件】拖入到左右布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 50 |
| 高 | 40 |
| 背景颜色 | #FFF44336 |
从【小部件面板】-> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 断开 |
| 字体颜色 | #FFFFFFFF |
按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下
-
动作类型 --【自定义代码块】，添加customCode4自定义代码块并选择
customCode4代码内容如下
void function(){serialPort?.close();serialPort = null;setState(() {});
}操作成功如下
（8）再次从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的【上下布局】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 无限大 |
| 高 | 40 |
| 背景颜色 | #00C8C8C8 |
（9）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 数据收发内容 |
（10）从【小部件面板】> 【基本元素】中选择【容器小部件】拖入到页面编辑窗口内的【上下布局】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 无限大 |
| 高 | 300 |
| 背景颜色 | #00C8C8C8 |
（11）从【小部件面板】> 【布局元素】中选择【列表布局小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 绑定变量 | res |
| 宽 | 无限大 |
| 高 | 无限大 |
（12）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【列表布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | ${res[index]['time']}${res[index]['type']}: ${res[index]['data']} |
| 最大行数 | 3 |
操作成功如下
（13）从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 无限大 |
| 高 | 40 |
| 背景颜色 | #00C8C8C8 |
从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 发送数据内容 |
（14）从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 宽 | 200 |
| 高 | 40 |
| 背景颜色 | #FF006FFF |
| 圆角 | 10 |
打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下
-
动作类型 --【自定义代码块】，添加customCode5自定义代码块并选择
customCode5内容如下
void function(){if (data.isEmpty) {EasyLoading.showError("请输入发送数据内容");return;}sendDataSerial(data);res.add({"data": data,"time": DateFormat("HH:mm:ss").format(DateTime.now()),"type": "发送",});setState(() {});
}（15）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：
| 属性名称 | 属性内容 |
|---|---|
| 文本内容 | 发送数据 |
| 字体颜色 | #FFFFFFFF |
操作成功如下
