当前位置：首页 > news >正文

低代码平台开发胎压监测APP

news 来源：原创 2025/6/29 11:30:42

项目介绍

该项目是一个利用Flutter框架和蓝牙技术实现轮胎压力实时监测的应用。

主要功能如下：

用于接收蓝牙模块传输的胎压数据，并实时显示胎压值。
APP对接收到的胎压数据进行处理，如单位转换、数据滤波等，然后将处理后的胎压值显示在界面上。

总之，该项目可以帮助用户实时监测轮胎压力，并提供丰富的功能以满足不同需求。该项目可以应用于汽车、自行车、摩托车等轮胎压力监测场景。

平台支持

Android
iOS

AiFlutter市场链接：胎压监测App

蓝牙调试助手APP源码链接：源码下载

平台实现步骤

一、注册登录

打开低代码平台登录网页，使用微信快捷登录或者扫描二维码登录。

二、创建项目

点击【新增项目】>【手动添加】，在平台内部创建项目
在跳出的弹窗中输入项目名称、项目描述，建议结合项目功能描述命名，便于检索
输入完成后点击确定

三、创建页面

（1）点击已经创建好的项目进入到操作界面，默认会存在一个HomePage页面，操作界面相关详情可查看教程操作界面

（2）创建三个页面 AddBleDevice、SetBleName、DeviceNetWork

点击【添加页面】> 【创建页面】
在跳出的弹窗中输入页面名称、页面描述
最后点击确定即可

（4）删除HomePage页面，在【页面管理】中右击要删除的页面，并点击【删除】

（5）设置AddBleDevice为主页面，在【页面管理】中单击要删除的页面，并在右侧的属性编辑器中设置页面路由为/

四、页面设计

AddBleDevice页面设计

效果图

实现流程

1. 在【页面管理】中单击AddBleDevice页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下

名称

内容

页面描述

整个页面的布局可以是垂直分区的，上半部分是设备扫描区，下半部分是设备列表区。

功能详情

1. 在页面初始化时，会依次执行以下操作

（1）监听蓝牙扫描状态，接收到状态变化后重新构建页面

（2）蓝牙扫描结果监听，接收到扫描结果后进行存储并重新构建页面

（3）开始蓝牙扫描，扫描时长8秒

2. 连接设备，在设备列表中选择设备进行连接，连接成功后跳转到数据收发页面

3. 重新扫描，蓝牙扫描结束后，点击【重新扫描】开始扫描，此时会断开已连接的蓝牙设备

2. 在【页面管理】中单击AddBleDevice页面，在右侧的属性编辑器中添加页面变量

需要定义的变量如下

变量名称	变量类型	是否为数组	默认值	变量描述
devices	Map	是		设备原始数据列表，用来去重
scaning	Bool	否	false	蓝牙扫描状态 true 正在扫描 false 未扫描
deviceList	Map	是		页面显示的设备列表

操作成功如下

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

在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加customCode1自定义代码块并选择

customCode1内容如下

void function() {// 控制雷达扫描的动画  waterRippleController = AnimationController(vsync: this,duration: const Duration(seconds: 2),);radarViewController = AnimationController(vsync: this,duration: const Duration(seconds: 5),);// 蓝牙扫描结果处理  ble.onScanResults(callbackLast: (event) {String name = event.advertisementData.advName;// 设备名称过滤  String DEVICE_NAME = StorageUtil().read('DEVICE_NAME') ?? '';if ((DEVICE_NAME.isNotEmpty &&(name == '' || !name.contains(DEVICE_NAME))) ||devices.contains(event)) {return;}// 去重操作，防止重复设备添加  devices.add(event);if (mounted) {setState(() {// 添加至设备列表  deviceList.add({"name": event.device.platformName,"rssi": event.rssi,"mac": "mac","raw": event});});}});// 扫描状态处理  ble.isScaning((event) {if (mounted) {setState(() {scaning = event;});if (event) {waterRippleController?.repeat();radarViewController?.repeat();} else {waterRippleController?.stop();radarViewController?.stop();}}});// 开始扫描  ble.status(timeout: const Duration(seconds: 8));}

操作成功如下

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

（1）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	`蓝牙连接`
文本颜色	`#FFFFFFFF`
文本大小	`18`

（2）从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到顶部导航栏右侧位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	`40`
高	`40`
背景颜色	`#00C8C8C8`
阴影大小	`0`

（3）按钮打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【导航】，设置导航到SetBleName页面

（4）从【小部件面板】> 【基本元素】中选择【图标小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
图标	`setting`
大小	`24`
颜色	`#FFFFFFFF`

5. 页面内容设计

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

属性名称	属性内容
宽	`80`
高	`20`
颜色	`#00C8C8C8`

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

属性名称	属性内容
变量绑定	`deviceList`
宽	`320`
高	`320`
雷达指针	true
指针颜色	`#FF00478D`
背景渐变	true
渐变类型	`放射性渐变`
过渡点	`过渡点：0，颜色：#7740FAB0` `过渡点：1，颜色：#FFFFFFFF`
渐变中心	`0,0`
渐变半径	`0.5`
水波纹个数	`3`
水波纹颜色	`#1CE6ECEC`
水波纹是否填充	`true`
点的大小	`15`
点的颜色	`#FF3B35B7`

操作成功如下

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

属性名称	属性内容
宽	无限大
高	`40`
颜色	`#00C8C8C8`

（4）从【小部件面板】> 【基本元素】中选择【条件生成器小部件】拖入到容器小部件中，然后在右侧的属性编辑器中选择变量scaning

（5）条件 scaning = false，勾选展示此界面，从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【条件生成器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	`120`
高	`40`
颜色	`#00C8C8C8`
阴影大小	0

（6）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加customCode2自定义代码块并选择

customCode2内容如下

void function() async {EasyLoading.dismiss();if (mounted) {// 断开蓝牙  await ble.disconnect();setState(() {// 清空设备列表devices.clear();});// 重新扫描设备  ble.status(timeout: const Duration(seconds: 8));}
}

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

属性名称	属性内容
文本内容	`重新扫描`
字体颜色	`#FF006FFF`
字体大小	`18`
字体粗细	`500`

（8）条件 scaning = true，勾选展示此界面，从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【条件生成器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	`正在扫描`
字体大小	`18`
字体粗细	`500`

操作成功如下

（9）从【小部件面板】> 【基本元素】中选择【滚动条小部件】拖入到页面编辑窗口内的上下布局中

（10）从【小部件面板】> 【布局元素】中选择【列表布局小部件】拖入到【滚动条小部件】中

属性名称	属性内容
绑定变量	`deviceList`
宽	`340`
高	`350`

操作成功如下

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

属性名称	属性内容
宽	`无限大`
高	`80`
背景颜色	`#FFFFFFFF`
圆角	`10`
内边距	`10`
外边距	`上：10 下：10`

（12）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中

（13）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【左右布局小部件】中

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

属性名称	属性内容
宽	`120`
高	`20`
背景颜色	`#00C8C8C8`

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

属性名称	属性内容
文本内容	`${deviceList[index]["name"] == '' ? '未知' : deviceList[index["name"]}`
字体大小	`16`
字体粗细	`700`

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

属性名称	属性内容
宽	`260`
高	`20`
背景颜色	`#00C8C8C8`

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

属性名称	属性内容
文本内容	`Mac: ${deviceList[index]['mac']} RSSI: ${deviceList[index]["rssi"]}`
字体颜色	`#FF999999`
字体大小	`14`
字体粗细	`500`

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

属性名称	属性内容
宽	`60`
高	`40`
背景颜色	`#00C8C8C8`
阴影大小	`0`

（15）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加自定义代码块customCode3并选择

customCode3内容如下

  void function(index) {if (scaning) {ble.stopScan();}EasyLoading.show();// 连接蓝牙  ble.connect(deviceList[index]['raw'].device,serviceUUID: StorageUtil().read("serviceUUID") ?? '',readCharacteristicUUID:StorageUtil().read("readCharacteristicUUID") ?? '',writeCharacteristicUUID:StorageUtil().read("writeCharacteristicUUID") ?? '',notifyCallBcak: () async {Map<String, dynamic> json = {"name": deviceList[index]['name'],"id": deviceList[index]['mac']};
await Get.toNamed('/DeviceNetWork', arguments: json);
EasyLoading.dismiss();});}

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

属性名称	属性内容
文本内容	`连接`
字体颜色	`#FF006FFF`
字体大小	`14`
字体粗细	`500`

操作成功如下

SetBleName页面设计

效果图

实现流程

1. 在【页面管理】中单击SetBleName页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下

名称

内容

页面描述

整个页面的布局可以是垂直分区的，从上到下依次为数据输入区（输入框），输入确认区（按钮）

功能详情

1. 蓝牙名称过滤，设置BLE名称后蓝牙只搜索该名称的设备

2. 读写UUID，如果不设置蓝牙的读写UUID，则默认向所有的读写UUID发送数据和接收数据

2. 在【页面管理】中单击SetBleName页面，在右侧的属性编辑器中添加页面变量

需要定义的变量如下

变量名称	变量类型	是否为数组	默认值	变量描述
DEVICE_NAME	String	否	${StorageUtil().read("DEVICE_NAME") ?? ''}	设备名称
serviceUUID	String	否		服务UUID
readCharacteristicUUID	String	否		读特征UUID
writeCharacteristicUUID	String	否		写特征UUID

操作成功如下

2. 开启顶部导航栏

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

（2）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	`设置`
文本颜色	`#FFFFFFFF`
文本大小	`18`

3. 页面内容设计

属性名称	属性内容
宽	`无限大`
高	`600`
背景颜色	`#00C8C8C8`
内边距	`10`

（2）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【容器小部件】中

（3）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【上下布局小部件】中

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

属性名称	属性内容
文本内容	`BLE名称`

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

属性名称	属性内容
宽	`无限大`
高	`50`
背景颜色	`#00C8C8C8`
边框	位置下宽度 `1` 颜色 `#FF999999` 样式 `一`

（6）从【小部件面板】> 【表单元素】中选择【文本输入框小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
绑定变量	`DEVICE_NAME`
光标颜色	`#FF006FFF`

操作成功如下

（7）复制上述上下布局小部件及其子小部件的内容，并粘贴，修改内容如下

文本内容 服务UUID 、读特征UUID 、写特征UUID
绑定变量 serviceUUID 、readCharacteristicUUID 、writeCharacteristicUUID

操作成功如下

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

属性名称	属性内容
宽	`无限大`
高	`40`
背景颜色	`#FF006FFF`
阴影大小	`4`
圆角大小	`10`

（9）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加customCode1自定义代码块并选择

customCode1内容如下

void function(){StorageUtil().write("DEVICE_NAME", DEVICE_NAME);
StorageUtil().write("serviceUUID", serviceUUID);StorageUtil().write("readCharacteristicUUID", readCharacteristicUUID);StorageUtil().write("writeCharacteristicUUID", writeCharacteristicUUID);             EasyLoading.showSuccess("设置成功");Get.back();
}

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

属性名称	属性内容
文本内容	`确认`
字体颜色	`#FFFFFFFF`
字体大小	`14`
字体粗细	`500`

DeviceNetWork页面设计

效果图

实现流程

1. 在【页面管理】中单击DeviceNetWork页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下

名称

内容

页面描述

整个页面的布局可以是垂直分区的，上半部分是电动车图像，下半部分是数据指标（胎压、温度、电量）。

功能详情

1. 在页面初始化时，会依次执行以下操作

（1）蓝牙接收数据监听，接收到数据后进行存储并重新构建页面

（2）蓝牙连接状态监听，如果蓝牙断开连接，则在400ms后回到上一个页面

2. 数据指标计算，将接收到的蓝牙数据通过协议解析成数据并进行回显

2. 在【页面管理】中单击DeviceNetWork页面，在右侧的属性编辑器中添加页面变量

需要定义的变量如下

变量名称	变量类型	是否是列表	默认值	变量描述
password	Map	是		接收的数据内容
isConnected	Bool	否	false	连接状态
wifiname	String	否		发送数据内容
_getData	Var	否		数据接收流
_connectionSubscription	Var	否		连接状态流
disconnectTimer	Var	否		断开连接定时器
tirePressure	Int	否	0	前轮的胎压值
tirePressure1	Int	否	0	后轮的胎压值
temperature	Double	否	0	温度
voltage	Double	否	0	电压

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

在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加customCode1自定义代码块并选择
动作类型 --【硬件动作】，硬件类型 --【蓝牙】，操作类型 --【接收数据】，协议配置 -- 添加协议并选择，通信协议参考：蓝牙通讯协议模板

协议配置如下

命令	帧头	帧长	控制命令	数据	校验	帧尾
字节长度	1	1	1	9	1	1
案例	0xAA	0xXX	0xXX	0xXX	0xXX	0x55
描述	定值	数据位长度+3	变值	变值	从0到n-1位累加校验	定值

协议解析

控制字	变量名称	表达式	备注
01	taiya	_protocolArr_10[3]<<8 \| _protocolArr_10[4]	前轮的胎压值
	taiya1	_protocolArr_10[5]<<8 \| _protocolArr_10[6]	后轮的胎压值
	wendufuhao	_protocolArr_10[7]	温度符号
	wendu	_protocolArr_10[8]<<8 \| _protocolArr_10[9]	温度
	dianya	_protocolArr_10[10]<<8 \| _protocolArr_10[11]	电压

变量赋值

控制字	页面变量	变量名称	备注
01	tirePressure	taiya	前轮的胎压值
	tirePressure1	taiya1	后轮的胎压值
	temperature	wendu	温度
	voltage	dianya	电压

customCode1内容如下

void function(){_connectionSubscription?.cancel();_connectionSubscription = ble.connectController.stream.listen((event) {if (event is BluetoothConnectionState) {if (mounted) {setState(() {switch (event) {case BluetoothConnectionState.connected:isConnected = true;break;case BluetoothConnectionState.disconnected:disconnectTimer?.cancel();disconnectTimer = Timer(const Duration(milliseconds: 400), () {if (connectStatus == BluetoothConnectionState.disconnected) {//400毫秒后还是未连接才代表断开了连接,回到以前的界面print("400毫秒后还是未连接才代表断开了连接,回到以前的界面");EasyLoading.showError("设备断开了连接");Get.offNamed('/');                    }});
break;
default:}});}}});}

操作成功如下

4. 页面内容设计

属性名称	属性内容
宽	`无限大`
高	820
背景渐变	`true`
渐变类型	线性渐变
过渡点	过渡点 0 颜色 #FF8CBCFA 过渡点 0.3 颜色 #FF93CEFC 过渡点 1 颜色 #FFE5E5E5
渐变起点	0,1
渐变终点	0,-1

（2）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【容器小部件】中

（3）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【上下布局小部件】中

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

属性名称	属性内容
宽	40
高	40
背景颜色	`#00FCFCFC`
阴影大小	0
圆角	40

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

属性名称	属性内容
图标	left
图标大小	24
图标颜色	#FF000000

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

属性名称	属性内容
宽	`80`
高	100
背景颜色	`#00C8C8C8`

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

属性名称	属性内容
宽	`无限大`
高	`200`
Box Fit	`适应高度`
图片来源	我的文件点击上传文件图标进行上传，图片素材链接：图片下载

（8）从【小部件面板】> 【表单元素】中选择【左右布局小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
主轴对齐	从左往右第 5 个选项

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

属性名称	属性内容
文本内容	${tirePressure} kPa

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

属性名称	属性内容
文本内容	${tirePressure1} kPa

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

属性名称	属性内容
宽	`80`
高	80
背景颜色	`#00C8C8C8`

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

属性名称	属性内容
主轴对齐	从左往右第 4 个选项

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

属性名称	属性内容
宽	170
高	90

（14）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中

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

属性名称	属性内容
宽	`40`
高	40
Box Fit	`按比例缩小`
图片来源	我的文件点击上传文件图标进行上传，图片素材链接：图片下载

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

属性名称	属性内容
文本内容	${temperature} ℃

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

属性名称	属性内容
宽	170
高	90

（16）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中

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

属性名称	属性内容
宽	`40`
高	40
Box Fit	`按比例缩小`
图片来源	我的文件点击上传文件图标进行上传，图片素材链接：图片下载

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

属性名称	属性内容
文本内容	${voltage} V

项目介绍

平台支持

平台实现步骤

一、注册登录

二、创建项目

三、创建页面

四、页面设计

AddBleDevice页面设计

效果图

实现流程

SetBleName页面设计

效果图

实现流程

DeviceNetWork页面设计

效果图

实现流程

相关文章：