一个小时搞定串口调试助手！！！

变量名称	变量类型	是否为数组	默认值	变量描述
serialPort	Var	否		与串口设备通信的封装类对象
data	String	否		发送串口数据的内容
isWindows	Var	否	Platform.isWindows	判断当前系统是否为windows
res	Map	是		用来存储串口设备数据的载体
_dropDownValue	String	否	COM1	COM口下拉框选中值，仅在桌面端有用
availablePorts	String	是		当前系统可用的COM口列表，仅在桌面端有用

操作成功如下

（2）添加页面初始化动作，在右侧的属性编辑器中点击【动作】-> 【打开】

在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下

动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【拔出监听】，添加customCode1自定义代码块并选择
动作类型 --【自定义代码块】，代码块选择customCode1
动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【扫描】，扫描方式 --【单次扫描】
动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【连接】，连接方式 --【数组索引】，索引输入【0】
动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【接收数据】，添加customCode2自定义代码块并选择

操作成功如下

（3）开启顶部导航栏，点击页面编辑窗口右上角的【顶部导航栏】并开启，配置顶部导航栏背景色为 #FF006FFF

从【小部件面板】-> 【常用元素】中选择文本小部件拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：
- 文本内容串口调试助手
- 文本颜色#FFFFFFFF
- 文本大小18

（4）页面内容设计

从【小部件面板】-> 【常用元素】中选择容器小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
- 宽 无限大 高700
- 背景颜色#00C8C8C8
- 内边距10
从【小部件面板】-> 【常用元素】中选择上下布局小部件拖入到页面编辑窗口内的容器小部件中
从【小部件面板】-> 【基本元素】中选择条件生成器小部件拖入到上下布局中，然后在右侧的属性编辑器中选择变量isWindows，属性信息如下：
- 条件 isWindows = true，勾选展示此界面，从【小部件面板】-> 【常用元素】中左右布局小部件拖入到条件生成器小部件中
  - 从【小部件面板】-> 【表单元素】中选择下拉菜单小部件拖入到左右布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
    - 第一个数据绑定选择变量_dropDownValue
    - 第二个数据绑定选择变量avaliablePorts
  - 从【小部件面板】-> 【基本元素】中选择条件生成器小部件拖入到左右布局小部件中，然后在右侧的属性编辑器中选择变量serialPort，属性信息如下：
    - 条件 serialPort == null，勾选展示此界面，从【小部件面板】-> 【常用元素】中选择按钮小部件拖入到条件生成小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
      - 按钮背景颜色#FF006FFF
      - 按钮阴影大小4
      - 宽 50 高40
      - 按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下
        动作类型 --【自定义代码块】，添加customCode3自定义代码块并选择
        动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【接收数据】，代码块选择customCode2
      - 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到按钮小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
        文本内容 连接
        字体颜色 #FFFFFFFF
    - 条件 serialPort != null，勾选展示此界面，从【小部件面板】-> 【常用元素】中选择按钮小部件拖入到左右布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
      - 按钮背景颜色#FFF44336
      - 按钮阴影大小4
      - 宽 50 高40
      - 按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下
        动作类型 --【自定义代码块】，添加customCode4自定义代码块并选择
      - 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到按钮小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
        文本内容 断开
        字体颜色 #FFFFFFFF
    - 操作成功如下
- 条件 isWindows = false，勾选展示此界面，从【小部件面板】-> 【常用元素】中选择容器小部件拖入到条件生成器小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
  - 宽 0 高0
  - 背景颜色#00C8C8C8
- 操作成功如下
再次从【小部件面板】-> 【常用元素】中选择容器小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
- 宽 无限大 高40
- 背景颜色#00C8C8C8
- 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到容器小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
  - 文本内容 数据收发内容

从【小部件面板】-> 【基本元素】中选择容器小部件拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽 无限大 高300
背景颜色#00C8C8C8
从【小部件面板】-> 【布局元素】中选择列表布局小部件拖入到容器小部件中
- 绑定变量 res
- 宽无限大 高无限大
- 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到列表布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
  - 文本内容 ${res[index]['time']}${res[index]['type']}: ${res[index]['data']}
  - 最大行数3
操作成功如下
从【小部件面板】-> 【常用元素】中选择容器小部件拖入到上下布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：
- 宽无限大 高40
- 背景颜色 #00C8C8C8
- 从【小部件面板】-> 【常用元素】中选择文本小部件拖入到容器小部件中，并设置
  - 文本内容 发送数据内容

从【小部件面板】-> 【常用元素】中选择按钮小部件拖入到上下布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：

宽200 高40
背景颜色 #FF006FFF
阴影大小4
圆角10
从【小部件面板】-> 【常用元素】中选择文本小部件拖入到容器小部件中，并设置
- 文本内容 发送数据
- 字体颜色 #FFFFFFFF
- 打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下
  - 动作类型 --【自定义代码块】，添加customCode5自定义代码块并选择
操作成功如下

customCode1内容如下

void function(){
   if(Platform.isAndroid){
      return;
    }
    // 桌面串口初始化
    availablePorts = SerialPort.availablePorts;

    print("availablePorts==== ${availablePorts}");

    if (availablePorts.isEmpty) {
      return;
    }
    _dropDownValue = availablePorts[0];
    setState(() {});
}

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(() {});
}

customCode4内容如下

void function(){
    serialPort?.close();
    serialPort = null;
    setState(() {});
}

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(() {});
}