基于 Harmony 6.0 应用的饮水提醒小助手实现

基于 Harmony 6.0 应用的饮水提醒小助手实现前言成年人一天该喝 1500-2000ml 水但绝大多数人忘记喝、忘了量、晚上才发现一整天没喝够。一款好的饮水提醒应用要把今日已喝 / 还差多少 / 下次喝水时间 / 本周达标率四件事在一屏内全部铺到。Harmony 6.0 时代饮水类应用迎来了几个独特的能力红利——PushKit 提供精准定时提醒、HealthKit 让饮水记录进入系统级健康档案、超级终端让手表震动提醒、桌面服务卡片让进度常驻可见。本文用 Flutter 在 Harmony 6.0 上实现一个饮水提醒首页。背景饮水类应用的视觉关键词是清新、轻盈、激励——青色 #06B6D4 配蓝色 #0EA5E9 是这类应用的合适主色。本项目首页 5 个模块渐变 Header今日饮水进度水滴 大记录按钮、快捷记录 4 等分200 / 300 / 500 / 自定义、本周达标日历、饮水时间轴、节气饮水提示。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在饮水提醒类应用上的能力栈完整——PushKit 提供精准提醒可按用户作息自定义、HealthKit 让水分摄入进入系统级健康档案、超级终端让手表振动配合、桌面服务卡片让今日进度常驻、SensorKit 可结合温湿度智能调整目标量。开发核心代码代码一水滴进度 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_primaryDark],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(children:[constRow(children:[Icon(Icons.water_drop,color:Colors.white,size:22),SizedBox(width:8),Text(喝水小助手,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.notifications_active,color:Colors.white,size:22),]),constSizedBox(height:18),Stack(alignment:Alignment.center,children:[SizedBox(width:160,height:160,child:CircularProgressIndicator(value:0.62,strokeWidth:14,backgroundColor:Colors.white.withValues(alpha:0.22),valueColor:constAlwaysStoppedAnimation(Colors.white),),),constColumn(children:[Icon(Icons.water_drop,color:Colors.white,size:28),SizedBox(height:4),Text(1,240,style:TextStyle(color:Colors.white,fontSize:32,fontWeight:FontWeight.w900)),Text(/ 2,000 ml,style:TextStyle(color:Colors.white70,fontSize:12)),]),]),constSizedBox(height:14),constText(还差 760ml · 距下次提醒 38 分钟,style:TextStyle(color:Colors.white,fontSize:13,fontWeight:FontWeight.w700)),]),);}提醒时间通过 PushKit 系统级保活不会被普通省电策略杀掉确保用户即便忙起来也不会忘。HealthKit 记录每次饮水量结合心率、运动量等数据综合给出个性化的目标。从「水滴进度 Header」的可视化目标与情感激励设计角度再补一段。喝水类应用的 Header 必须把「我今天喝了多少 / 还差多少」这件事在一眼内交代清楚。这段 Header 用主蓝色到青色的渐变背景模拟「水」的视觉配合中央水滴形进度图 「已喝 / 目标」数据 下次提醒倒计时的多段式排版。水滴形的进度图比传统圆环更契合「喝水」主题是产品场景与视觉表达的完美呼应。如果未来要扩展支持「按时段定制喝水量」早上喝多、下午喝少可以做一个时段化的横向进度条鸿蒙 6.0 的 PushKit 能精准按时段触发提醒。代码二快捷记录Widget_quickAdd(){finalitemsconst[[200,ml,一小杯,_accent],[300,ml,一杯,_primary],[500,ml,一瓶,_green],[?,,自定义,_amber],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[3]asColor;returnExpanded(child:Column(children:[Container(width:60,height:60,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(20)),child:Stack(alignment:Alignment.center,children:[Icon(Icons.local_drink,color:c,size:30),]),),constSizedBox(height:6),Text(${it[0]}${it[1]},style:TextStyle(color:c,fontSize:13,fontWeight:FontWeight.w800)),Text(it[2]asString,style:constTextStyle(color:_sub,fontSize:10)),]));}).toList()),);}快捷记录用 4 个常用容量按钮一杯 200ml、一瓶 500ml、一壶 1000ml、自定义让用户一键记录避免每次都要选择数量的繁琐。每个按钮用主题色浅背景 容量图标 ml 数字形成视觉一致的快速入口。从「快捷记录」的喝水习惯养成与轻量交互设计角度再补一段。喝水记录最大的体验障碍就是「记不住、不想填」。这段快捷按钮把最常见的 4 种容量做成一键操作让用户在喝水后用 0.5 秒完成记录几乎没有心理负担。「自定义」按钮兜底其他容量场景配合数字输入弹窗实现灵活记录。如果未来要扩展支持「按饮品类型分类」白水、茶、咖啡、果汁可以在快捷按钮下方加 chip 切换栏因为不同饮品的水合作用不同。鸿蒙 6.0 的轻量交互动画 vsync 对齐按下按钮的反馈动画与系统级动效一致。代码三本周达标日历Widget_calendar(){finaldoneconst[true,true,true,false,true,true,false];finaldaysconst[一,二,三,四,五,六,日];returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Text(本周达标,style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),Spacer(),Text(5 / 7 天 · 71%,style:TextStyle(color:_primary,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:14),Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){returnColumn(children:[Container(width:36,height:36,decoration:BoxDecoration(shape:BoxShape.circle,color:done[i]?_primary:_primary.withValues(alpha:0.12)),alignment:Alignment.center,child:Icon(done[i]?Icons.check:Icons.water_drop_outlined,color:done[i]?Colors.white:_primary,size:18),),constSizedBox(height:6),Text(days[i],style:constTextStyle(color:_sub,fontSize:11)),]);})),]),);}每天达标自动同步到桌面服务卡片让用户每天解锁手机就能看到已喝 1240 / 2000形成持续激励。从「本周达标日历」的连续打卡心理与可视化设计角度再补一段。喝水习惯类应用的核心留存机制是「连续达标」——用户一旦连续 5 天达标就有「不想断的」心理压力。这段日历用 7 个圆点表示一周达标的圆点用主色实心 勾未达标的用浅色空心让用户一眼识别本周节奏。如果某天接近达标但没完成圆点用半填充色显示给用户「就差一点」的视觉刺激。如果未来要扩展支持「连续达标徽章」连续 7 天获得「水分管理大师」徽章可以在日历右上角加奖杯图标配合 FormExtensionAbility 把「连续达标天数」做成桌面卡片让用户每天看见自己的成就感。心得饮水提醒类 App 的视觉灵魂是清新 激励——青色给水的清新水滴大圆环给可视化进度。开发时最容易犯的错是把记录按钮做得太复杂要选茶水、咖啡、果汁等反而让用户嫌麻烦。我的策略是用 200 / 300 / 500ml 三档常用 自定义1 秒内完成记录。从能力扩展角度饮水应用最值得在鸿蒙端打造的是PushKit 智能提醒 HealthKit 系统级档案 超级终端手表震动 桌面服务卡片进度四件套。总结本篇实现了 Harmony 6.0 端的饮水提醒首页5 个模块、纯 UI、零依赖、约 280 行代码。从扩展角度建议生产业务里把提醒接入 PushKit把饮水记录接入 HealthKit把今日已喝做成 FormExtensionAbility 桌面卡片把手表振动接入超级终端把目标量调整接入 AI 助手。下一篇是第十三组的第二块——跑步配速教练应用。