蓝牙调试助手开发（04）：蓝牙列表开发
本文详细介绍了蓝牙调试助手App中蓝牙列表功能的开发流程。主要内容包括：1)页面搭建步骤，包含导航栏、过滤条件和设备列表区域的设计；2)变量配置，如扫描状态、设备列表等；3)功能逻辑实现，包括蓝牙扫描状态监听、设备发现处理、连接操作等；4)动作流程设计，涵盖页面初始化、扫描按钮、清空按钮和连接按钮的功能实现。开发过程通过可视化界面操作完成，涉及硬件操作、变量更新和导航跳转等核心功能，最终实现蓝牙设
视频地址：哔哩哔哩
蓝牙列表功能开发
上一节我们讲解了蓝牙调试助手 App 的需求导入功能，本节我们将讲解 蓝牙列表功能的开发流程。
在工作台的项目列表中找到蓝牙调试助手 App，点击【项目菜单】->【开发文档】进入到需求文档页面。
编辑页面信息
- 点击 切换到页面菜单，选中 BleList。
- 点击 编辑 按钮，对页面信息进行修改
功能详情
功能详情填写：
- 蓝牙搜索
- 支持 蓝牙名称、mac地址、RSSI（0到-100范围）搜索过滤
- 蓝牙列表，显示 设备名称（没有显示 N/A）mac地址、rssi
- 蓝牙连接，支持连接指定蓝牙设备
- 广播数据解析，按照官方的格式进行解析，参考 https://www.bluetooth.com/specifications/assigned-numbers/
参考页面
放入下图：
变量列表
进入变量列表，点击 添加变量：
| 变量名称 | 变量类型 | 是否为数组 | 默认值 | 变量描述 |
|---|---|---|---|---|
| isScanning | Bool | 否 | false | 是否正在扫描 |
| list | Map | 是 | 设备列表 | |
| filterData | Map | 否 | 蓝牙过滤数据 | |
| device | Var | 否 | 需要连接的device对象 |
配置流程
在流程设计中，填写以下流程：
-
页面初始化：配置蓝牙扫描状态监听，并赋值给isScanning；配置蓝牙发现设备监听，将扫描到的设备进行处理。
点击保存按钮保存数据
页面搭建
我们先看一下需求中的页面布局结构：
-
最上方是一个导航栏，标题为「蓝牙调试助手」，右侧为 开始扫描 按钮
-
导航栏下方首先展示过滤条件。
-
继续往下，是设备列表区域。
1. 点击右上角 跳转到开发页面，选中“BleList”页面，开始页面设计。
2. 点击小部件面板图标进入小部件面板
3.在页面预览区域点击顶部导航栏图标，打开添加顶部导航
4.拖动文本组件到导航栏中间，点击选中刚拖动的文本小部件，右侧出现小部件的配置页面，并配置如下内容
-
文本内容：蓝牙调试助手
-
字号：
18 -
字体颜色：
#FFFFFFFF
5.拖动左右布局到导航栏右侧，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
主轴对齐：
左侧对齐 -
次轴对齐：
居中对齐
6.拖动按钮到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
80
-
高：
40
-
背景颜色：
#00FCFCFC
-
阴影大小：
0
7.拖动文本到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${sScanning == true ? '停止扫描': '开始扫描'}
-
文本大小：
14
-
字体颜色：
#FFFFFFFF -
预览文本：
开始扫描
8.拖动按钮到 第5步的左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
50
-
高：
40
-
背景颜色：
#00FCFCFC
-
阴影大小：
0
9.拖动文本到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：清空
-
文本大小：
14
-
字体颜色：
#FFFFFFFF
10.拖动按钮到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
无限
-
高：
40
-
背景颜色：
#FFFFFFFF
-
阴影大小：
0
11.拖动文本到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${filterData['text']?? 'No filter' }
-
文本大小：
16
12.拖动滚动条到上下布局中，然后拖动列表布局到滚动条中，在右侧的属性编辑器中配置属性，属性信息如下：
-
数据绑定：
list
-
宽：
无限
-
高：
680
13.拖动按钮到列表布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
无限
-
高：
80
-
背景颜色：
#FFFFFFFF
-
阴影大小：
0
-
外边距：
上 2
14.拖动左右布局到按钮中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
主轴对齐：
环绕对齐 -
次轴对齐：
居中对齐
15.拖动图片到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
50 -
高：
50 -
图片来源：
我的文件
16.拖动容器到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
200 -
高：
80
-
背景颜色：
#00FFFFFF
17.拖动上下布局到容器中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
主轴对齐：
环绕对齐 -
次轴对齐：
左侧对齐
18.拖动文本到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${list[index]['name']==''? 'N/A' :list[index]['name']}
-
文本大小：
16
-
字体粗细：
700
19.拖动文本到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${list[index]['mac']}
-
文本大小：
14
-
字体粗细：400
20.拖动文本到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
${list[index]['rssi']} dBm
-
文本大小：
14
-
字体粗细：400
21.拖动条件生成器到左右布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
条件内容：
list[index]['connectable']
22.拖动按钮到第一个条件内容中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
100
-
高：
40
-
背景颜色：
#FF000000
-
阴影大小：
4
23.拖动文本到上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
文本内容：
连接
-
文本大小：
14
-
字体粗细：
500
-
字体颜色：
#FFFFFFFF
24.拖动容器到第二个条件内容中，然后在右侧的属性编辑器中配置属性，属性信息如下：
-
宽：
100
-
高：
40
-
背景颜色：
#00FFFFFF
配置逻辑（动作流程图）
进入页面动作流程图
1.点击右上角 页面设置 图标进入到页面设置中
2.打开动作 → 点击 编辑流程图
页面初始化
1. 点击页面初始化下面的加号添加事件
2.点击开始下方的加号，添加动作
3.鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：
硬件动作 -
硬件类型：蓝牙
-
蓝牙操作类型：蓝牙扫描状态监听
-
停止扫描变量更新绑定：
isScanning false -
开始扫描变量更新绑定：
isScanning true
4.在蓝牙扫描状态监听下方添加一个新的动作并用鼠标选中动作，右侧出现动作配置并配置如下内容
-
动作类型：
自定义代码块 -
点击新增自定义代码块
-
代码块名称：
蓝牙扫描结果处理 -
代码块内容
-
void function(){ ble.onScanResults(callbackLast: (result) { String name = result.advertisementData.advName; // 蓝牙名称 String mac = result.device.remoteId.str; // 蓝牙mac地址 int rssi = result.rssi; if (filterData["nameType"] == '有名称' && name == '') { return; } String filterName = (filterData["name"] ?? "").toLowerCase(); String filterMac = (filterData["mac"] ?? "").toLowerCase(); int filterRssi = filterData["rssi"] ?? 100; if (filterName.isNotEmpty && !name.toLowerCase().contains(filterName)) { return; } if (filterMac.isNotEmpty && !mac.toLowerCase().contains(filterMac)) { return; } if (filterRssi != 100 && rssi < -filterRssi) { return; } var item = list.firstWhere((map) => map['mac'] == mac, orElse: () => {}); List<int> data = result.advertisementData.rawBytes ?? []; if (item.isEmpty) { list.add({ "mac": mac, "name": name, "rssi": rssi, "device": result.device, "data": data, "connectable": result.advertisementData.connectable }); } else { item["rssi"] = rssi; item["data"] = data; } setState(() {}); }); }
-
-
扫描按钮动作流程图
1.点击按钮小部件进入到小部件配置中
2.打开动作 → 点击 编辑流程图
单击事件
1. 点击页面初始化下面的加号添加事件
2.点击开始下方的加号，添加条件
3.鼠标选中条件，右侧出现动作配置并配置如下内容
-
IF：
isScanning = true
4.点击第一个分支下的添加按钮，选择添加动作，并配置动作属性
- 动作类型：
硬件动作 - 硬件类型：
蓝牙 - 蓝牙操作类型：
停止扫描
5.点击第二个分支下的添加按钮，选择添加动作，并配置动作属性
- 动作类型：
硬件动作 - 硬件类型：
蓝牙 - 蓝牙操作类型：
蓝牙扫描 - 扫描时长：
15
清空按钮动作流程图
单击事件
1. 点击页面初始化下面的加号添加事件
2.点击开始下方的加号，添加动作，并配置动作属性
- 动作类型：
变量更新 - 选择变量：
list - 数组操作类型：
清空数组
连接按钮动作流程图
单击事件
1. 点击页面初始化下面的加号添加事件
2.点击开始下方的加号，添加动作，并配置动作属性
- 动作类型：
变量更新 - 选择变量：device
- 对应的值：
list[index]['device']
3.点击变量更新下方的加号，添加动作，并配置动作属性
- 动作类型：
导航 - 导航到：
DataTransfer - 携带参数：
- key：
name，常量值：${list[index]['name']} - key：device，变量值：
device
- key：
至此，页面及逻辑全部设置完成。
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
21
0- 0
已为社区贡献18条内容
所有评论(0)