基于 Harmony 6.0 应用的用药提醒与记录系统首页实现

基于 Harmony 6.0 应用的用药提醒与记录系统首页实现

前言

慢病管理是医疗健康赛道里最贴近日常的一块——高血压、糖尿病、甲状腺疾病、抑郁症等长期用药者，每天都需要在固定时间吃固定剂量的药物。漏服药物的后果有时是致命的。一款好的用药提醒应用要把"今天该吃什么 / 现在该吃什么 / 我已经吃了什么 / 药快没了"四件事在一屏内全部铺到。Harmony 6.0 时代，用药提醒应用迎来了几个独特的能力红利——PushKit 提供毫秒级精度的提醒推送（不会被系统省电策略杀掉）、HealthKit 让用药数据进入系统级健康档案、HMS Wallet 让处方电子化、超级终端让"老人服药"提醒能同步到子女手机。本文用 Flutter 在 Harmony 6.0 上实现一个用药提醒首页。

背景

医疗类应用的视觉关键词是"清晰、安全、无歧义"——清晰对应"药品名 + 剂量必须显著",安全对应"提醒不能错过",无歧义对应"颜色和图标必须有医学规范"。绿色 #16A34A 配蓝色 #0891B2 是这类应用的合适主色——既有"健康"又有"医学"。本项目首页 5 个模块：渐变 Header（今日服药进度 + 下一次提醒倒计时）、当前药品列表（每条显示药名 / 剂量 / 时间 / 已服未服 chip）、本周服药打卡热力图、家人代管 chip 栏、药品库存预警。从产品角度，用药提醒类应用的关键差异是"100% 不能错过"——比起其他工具应用，这类应用的提醒精确性是医学要求。鸿蒙 6.0 的 PushKit 是系统级保活通道，这类应用必须使用而不是依赖第三方推送。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在医疗健康类应用上的能力栈完整——PushKit 提供毫秒级精度推送、HealthKit 提供系统级健康档案、超级终端让多设备协同提醒、AI 助手能力提供用药咨询、隐私沙盒保护医疗数据安全。Flutter 嵌入 Harmony 6.0 的方案在这种"安全优先 + 简单交互"应用上非常合适——主页用 Flutter 自绘提供丰富 UI，提醒和数据存储通过 ArkTS 端 PushKit + HealthKit 接入。Skia 引擎对绿蓝色（#16A34A / #0891B2）的混合渲染稳重清爽，符合医疗场景的视觉气质。

开发核心代码

代码一：今日服药进度 Header

Header 必须把"今日已服几次 / 下一次什么时候"做成视觉中心。我用一个绿色渐变 Container，顶部一个 4 等分进度（已服 2/4），中间一个倒计时大字号"下次 14:00 · 还有 1 小时 26 分"。

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF15803D)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(22),),child:Column(children:[constRow(children:[Icon(Icons.medication,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:14),Row(children:List.generate(4,(i){finaldone=i<2;returnExpanded(child:Container(margin:EdgeInsets.only(right:i==3?0:6),height:8,decoration:BoxDecoration(color:done?Colors.white:Colors.white.withValues(alpha:0.22),borderRadius:BorderRadius.circular(4)),));})),constSizedBox(height:10),constText('今日 2 / 4 已服',style:TextStyle(color:Colors.white70,fontSize:12)),constSizedBox(height:18),constText('下次提醒',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text('14:00',style:TextStyle(color:Colors.white,fontSize:36,fontWeight:FontWeight.w900)),SizedBox(width:10),Padding(padding:EdgeInsets.only(bottom:8),child:Text('· 还有 1 时 26 分',style:TextStyle(color:Colors.white70,fontSize:13))),]),]),);}

倒计时数据在生产业务里来自 ArkTS 端 PushKit 的下一次提醒任务时间。鸿蒙 6.0 的提醒任务是系统级管理，不会因为应用被杀而失效。

从「今日服药进度 Header」的紧迫感设计与可视化倒计时角度再补一段。用药提醒类应用的 Header 必须把「下一次该吃什么 / 还有多久」这件事在一眼内交代清楚。这段 Header 用主蓝色到深蓝的渐变背景，配合大字号倒计时数字 + 药名 + 「我已服用」按钮的多段式排版，让用户的视觉动线从「时间紧迫感 → 药品识别 → 行动确认」一气呵成。倒计时数字是整页最大的视觉锚点。「我已服用」按钮做成纯白色实心 + 主色文字的胶囊形态，让用户一键完成打卡。如果未来要支持多种药并行管理，可以在 Header 下方横滑展示所有药品的下次服药时间，骨架完全不动。

代码二：药品列表

每条药品记录需要包含——图标、药名、剂量、服药时间、状态 chip（已服 / 待服 / 已过期）。我用 Container 包裹，状态用绿橙红三色区分。

Widget_medItem(Map<String,dynamic>m){finalstatus=m['status']asString;finalcolor=status=='已服'?_primary:status=='待服'?_amber:_red;returnContainer(margin:constEdgeInsets.only(bottom:10),padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Row(children:[Container(width:50,height:50,decoration:BoxDecoration(color:color.withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),child:Icon(Icons.medication,color:color,size:26),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(m['name']asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text(m['dose']asString,style:constTextStyle(color:_sub,fontSize:12)),constSizedBox(height:4),Row(children:[Icon(Icons.access_time,color:_sub,size:12),constSizedBox(width:4),Text(m['time']asString,style:constTextStyle(color:_sub,fontSize:11)),]),],)),Container(padding:constEdgeInsets.symmetric(horizontal:10,vertical:5),decoration:BoxDecoration(color:color.withValues(alpha:0.16),borderRadius:BorderRadius.circular(20)),child:Text(status,style:TextStyle(color:color,fontSize:12,fontWeight:FontWeight.w700)),),]),);}

每条药品记录在生产业务里会触发一个 PushKit 任务，到点准时弹出系统通知。如果用户长时间未点击，鸿蒙的统一推送通道还会通过超级终端把提醒同步到家人手机——这种"老人忘吃药家人立刻收到"的能力是 Harmony 6.0 在医疗场景的独特价值。

从「药品列表」的医疗专业性与状态可视化设计角度再补一段。药品列表是用药提醒应用的核心信息位——必须做到「一眼扫完今天还有什么要吃」。这段列表用「药品图标 + 药名 + 剂量 + 服药时间 + 状态 chip」五段信息塞在一行卡片里。状态用绿橙红三色编码（已服绿、待服橙、已过期红），是医学界通用的色彩语言。每个药品图标用浅色背景圆形容器（生产业务里替换为药品真实图）。如果未来要扩展支持「药物相互作用预警」（同时服用某些药品会冲突），可以在卡片右上角加一个红色叹号 chip，鸿蒙 6.0 端 Skia 对这种警示色块渲染极其稳定。

代码三：本周服药热力图

本周服药情况用 7x4 的小色块网格表示（7 天 × 4 次/天）——已服用主色，漏服用红色，未到时间用灰色。

Widget_heatmap(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('本周服药打卡',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:14),Column(children:List.generate(4,(row){returnPadding(padding:constEdgeInsets.only(bottom:6),child:Row(children:List.generate(7,(col){finalstate=(row*7+col)%5;Colorc;if(state<3){c=_primary;}elseif(state==3){c=_red;}else{c=constColor(0xFFE5E7EB);}returnExpanded(child:Container(margin:EdgeInsets.only(right:col==6?0:6),height:22,decoration:BoxDecoration(color:c,borderRadius:BorderRadius.circular(4)),));})),);})),constSizedBox(height:8),constRow(children:[Text('一',style:TextStyle(color:_sub,fontSize:11)),]),]),);}

热力图的简洁视觉非常适合"日历型"打卡数据——一眼看出哪天漏服。这种数据存储在 HealthKit 中，可以让医生在复诊时通过授权直接查看用药依从性，比传统纸质记录有效得多。

从「本周服药热力图」的健康数据可视化与医疗依从性追踪角度再补一段。慢病管理的核心是「依从性」——用户能不能按时按量吃药直接决定治疗效果。这段热力图用 7 列（一周）x N 行（每日服药时段）的网格表示一周服药情况，每个格子用绿色（已服）、橙色（迟服）、红色（漏服）、灰色（未到）四种颜色编码，让用户一眼识别自己的依从性模式。如果未来要扩展支持「按月查看」「按药品查看」，可以在热力图顶部加 chip 切换栏，鸿蒙 6.0 的 Skia 对这种网格渲染开销极低，即使有 30 天 x 4 时段 = 120 个格子也能丝滑流畅。这种热力图骨架可以无缝迁移到运动打卡、学习打卡、阅读打卡等场景。

心得

医疗类 App 的视觉灵魂是"克制 + 准确"——绿色给安全，三色状态指示给医学清晰。开发时最容易犯的错是把界面做得过于"医院化"（冷蓝白配色），反而让用户感到压力。我的策略是用绿色为主、白色卡片为辅，让整页氛围既专业又温和。从能力扩展角度，用药提醒类应用最值得在鸿蒙端打造的是"PushKit 系统级保活提醒 + 超级终端家人协同 + HealthKit 系统级健康档案"三件套——这套能力组合让"100% 不漏服"成为可能。

总结

本篇实现了 Harmony 6.0 端的用药提醒首页，5 个模块、纯 UI、零依赖、约 360 行代码。第十一组的"健康仪表盘 / 瑜伽教学 / 用药提醒"三个迥异的健康类场景共用同一份骨架。从扩展角度建议生产业务里：把提醒任务接入 PushKit；把用药记录接入 HealthKit；把家人协同接入超级终端能力；把"今日待服药"做成 FormExtensionAbility 桌面卡片；把电子处方接入 WalletKit。下一篇进入第十二组——单词记忆 / 题库刷题 / 课堂签到。