Flutter for OpenHarmony 实战_喝水提醒应用数据持久化与定时任务

Flutter for OpenHarmony 实战：喝水提醒应用数据持久化与定时任务

欢迎加入开源鸿蒙跨平台社区： 开源鸿蒙跨平台开发者社区

前言

喝水提醒应用的核心功能是帮助用户养成良好的饮水习惯，其中数据持久化和定时提醒是两个关键技术点。本文将详细介绍如何使用SharedPreferences实现数据存储，如何使用Timer.periodic实现定时提醒，以及如何设计直观的UI界面。

一、数据持久化系统

1.1 SharedPreferences集成

首先在pubspec.yaml中添加依赖：

dependencies:shared_preferences:^2.0.15

然后导入并在应用中使用：

import'package:shared_preferences/shared_preferences.dart';

1.2 数据保存

Future<void>_saveData()async{finalprefs=awaitSharedPreferences.getInstance();awaitprefs.setInt('current_water',_currentWater);finalrecordsJson=_records.map((record){return'${record.amount}|${record.timestamp.toIso8601String()}';}).toList();awaitprefs.setStringList('water_records',recordsJson);}

将当前饮水量和历史记录保存到本地存储。饮水量使用整数存储，记录列表转换为字符串列表存储，每条记录格式为"数量|时间戳"。

1.3 数据加载

Future<void>_loadData()async{finalprefs=awaitSharedPreferences.getInstance();setState((){_currentWater=prefs.getInt('current_water')??0;finalrecordsJson=prefs.getStringList('water_records');if(recordsJson!=null){_records=recordsJson.map((json){finalparts=json.split('|');returnWaterRecord(amount:int.parse(parts[0]),timestamp:DateTime.parse(parts[1]),);}).toList();}});}

从本地存储加载数据，恢复应用状态。使用??提供默认值，确保首次运行时不会出错。

二、定时提醒系统

2.1 Timer.periodic使用

Timer?reminderTimer;void_startReminder(){reminderTimer?.cancel();reminderTimer=Timer.periodic(constDuration(minutes:30),(timer){_showReminder();});}

每30分钟触发一次提醒。使用Timer.periodic创建周期性任务，返回的Timer对象可以用于取消任务。

2.2 提醒显示

void_showReminder(){if(mounted){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('该喝水了！'),duration:Duration(seconds:3),),);}}

使用SnackBar显示提醒信息。mounted检查确保组件仍然挂载，避免在组件销毁后显示错误。

2.3 定时器管理

@overridevoiddispose(){reminderTimer?.cancel();super.dispose();}

组件销毁时取消定时器，防止内存泄漏。

三、饮水记录管理

3.1 记录数据结构

classWaterRecord{finalint amount;finalDateTimetimestamp;WaterRecord({requiredthis.amount,requiredthis.timestamp});}

每条记录包含饮水量和时间戳。

3.2 添加记录

void_addWater(int amount){setState((){_currentWater+=amount;_records.add(WaterRecord(amount:amount,timestamp:DateTime.now(),));});_saveData();}

增加饮水量，添加记录，并保存到本地存储。

3.3 记录显示

ListView.builder(itemCount:_records.length,itemBuilder:(context,index){finalrecord=_records[index];finalhours=DateTime.now().difference(record.timestamp).inHours;returnListTile(title:Text('+${record.amount}ml'),subtitle:Text(hours<1?'刚刚':'$hours小时前喝过'),);},)

使用ListView显示历史记录，根据时间差显示友好的时间描述。

四、UI界面设计

4.1 进度显示

CircularProgressIndicator(value:_currentWater/_goal,strokeWidth:10,backgroundColor:Colors.grey.shade200,)

使用环形进度条显示当前进度，目标为2000ml。

4.2 快捷按钮

Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[ElevatedButton(onPressed:()=>_addWater(200),child:constText('+200ml'),),ElevatedButton(onPressed:()=>_addWater(500),child:constText('+500ml'),),],)

提供200ml和500ml两个常用选项，方便快速记录。

4.3 统计信息

Text('今日已喝:$_currentWaterml/$_goalml',style:constTextStyle(fontSize:18,fontWeight:FontWeight.bold),)

显示当前饮水量和目标，让用户清晰了解进度。

五、状态管理

5.1 状态变量

int _currentWater=0;finalint _goal=2000;List<WaterRecord>_records=[];

使用简单的状态变量管理应用状态。

5.2 setState更新

setState((){_currentWater+=amount;});

使用setState触发UI更新，这是Flutter中最基本的状态管理方式。

六、用户体验优化

6.1 即时反馈

每次添加饮水后立即更新UI并保存数据，给用户即时反馈。

6.2 持久化保证

每次状态变化都保存到本地，确保应用重启后数据不丢失。

6.3 友好提示

使用SnackBar而不是AlertDialog，提醒不会打断用户当前操作。

总结

本文详细介绍了喝水提醒应用的数据持久化和定时提醒系统。从SharedPreferences的使用到Timer.periodic的应用，从数据结构设计到UI界面实现，每个技术点都直接影响应用的功能性和用户体验。通过这些技术的综合应用，实现了功能完整且实用的喝水提醒应用。