基于 Harmony 6.0 应用的孕期管理助手实现

基于 Harmony 6.0 应用的孕期管理助手实现

前言

孕期是女性最特殊也最需要科学陪伴的阶段——从知道怀孕到分娩的 280 天里，每一周宝宝都在变化，每一项指标都需要监测。一款好的孕期管理应用要把"今天孕周 / 宝宝发育 / 产检日程 / 健康指标"四件事在一屏内全部铺到。Harmony 6.0 时代，孕期类应用迎来了几个独特的能力红利——HealthKit 让孕妇心率血压等指标进入系统级档案、PushKit 让产检提醒精准触达、HMS Account 家庭群组让丈夫一起参与、AI 助手能力提供 24h 孕期咨询、CameraKit 让 B 超报告 OCR 入库。本文用 Flutter 在 Harmony 6.0 上实现一个孕期管理首页。

背景

孕期类应用的视觉关键词是"温暖、温柔、期待"——粉色 #FB7185 配米黄 #FEF3C7 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（孕周倒计时 + 宝宝大小可视化）、本周宝宝发育卡、产检日程提醒、孕期指标卡（体重 / 血压 / 心率）、丈夫陪伴入口。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在孕期类应用上的能力栈完整——HealthKit 提供孕妇专项健康数据、PushKit 提供产检 / 服药精准提醒、HMS Account 家庭群组让丈夫接入、AI 助手能力提供孕期问答、CameraKit + NeuralNetworkRuntime 让 B 超报告 OCR 入库、超级终端让平板也能查看胎心数据。

开发核心代码

代码一：孕周 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(28),),child:Column(children:[constRow(children:[Icon(Icons.child_friendly,color:Colors.white,size:22),SizedBox(width:8),Text('孕期记',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.favorite,color:Colors.white,size:22),]),constSizedBox(height:18),constText('孕 24 周 + 3 天',style:TextStyle(color:Colors.white,fontSize:28,fontWeight:FontWeight.w900)),constSizedBox(height:6),constText('距预产期还有 112 天',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:14),Container(width:double.infinity,padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:Colors.white.withValues(alpha:0.22),borderRadius:BorderRadius.circular(16)),child:constRow(children:[Text('🍑',style:TextStyle(fontSize:36)),SizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text('宝宝像一个芒果',style:TextStyle(color:Colors.white,fontSize:15,fontWeight:FontWeight.w800)),SizedBox(height:4),Text('身长约 30cm · 体重约 600g',style:TextStyle(color:Colors.white70,fontSize:12)),],)),]),),]),);}

孕周通过末次月经计算自动得出，每天自动更新——大字号孕周 + 大 emoji 让妈妈每天打开应用都被"我的宝宝在长大"的喜悦激励。

从「孕周 Header」的情感化设计与生命陪伴感角度再补一段。孕期应用的 Header 必须传递「我的宝宝在长大」的感动。这段 Header 用粉色到桃红的渐变背景，配合「孕 24 周 5 天 / 距预产期 105 天」大字号数据 + 宝宝当前大小可视化（“宝宝像一个芒果”）+ 大 emoji 的多段式排版，让妈妈每次打开应用都被「孕期是一段特别的旅程」的情绪感染。粉色系是孕期 App 的最优主色——既温柔又表达「即将迎来宝宝」的期待感。如果未来要扩展支持「丈夫视角」（让丈夫看到自己的妻子今天孕几周），可以接入 HMS Account 家庭群组让数据多人共享。

代码二：产检日程

Widget_checkup(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.event_available,color:_primary,size:20),SizedBox(width:6),Text('下次产检',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),Spacer(),Text('完整日程',style:TextStyle(color:_primary,fontSize:12)),]),constSizedBox(height:12),Container(padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:_primary.withValues(alpha:0.08),borderRadius:BorderRadius.circular(12),border:Border(left:BorderSide(color:_primary,width:4))),child:constColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[Text('糖耐量筛查（OGTT）',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),SizedBox(height:4),Text('6 月 12 日 · 周三 8:00 · 北京协和医院',style:TextStyle(color:_sub,fontSize:12)),SizedBox(height:6),Text('提示 · 提前 8 小时禁食',style:TextStyle(color:_accent,fontSize:11,fontWeight:FontWeight.w700)),],),),]),);}

产检提醒通过 PushKit 在前 1 天和前 2 小时分别推送两次——对孕妇这种关键时间节点必须确保不漏。

从「产检日程」的医疗陪伴与精准提醒设计角度再补一段。孕期产检是医学和情感的双重重要节点——每次产检不仅检查指标也是夫妻共同期待的时刻。这段卡片用「下次产检」标题 + 日期时间 + 医院名 + 检查项目 + 「导航到医院」按钮的多段式排版，让孕妇能一眼掌握下次产检的全部信息。「导航到医院」按钮接入 MapKit 让孕妇一键拉起鸿蒙地图，免去手动搜医院的麻烦。如果未来要扩展支持「检查清单」（产检前需要带的东西、注意事项），可以在卡片下方加一个清单展开面板。鸿蒙 6.0 的 PushKit 双重推送（前 1 天 + 前 2 小时）让孕妇绝对不会错过产检时间。

代码三：孕期指标卡

Widget_metrics(){finalitems=const[[Icons.monitor_weight,'体重','62.5','kg','+0.3',_primary],[Icons.favorite,'心率','78','bpm','正常',_accent],[Icons.bloodtype,'血压','118/76','mmHg','正常',_green],[Icons.water_drop,'胎动','12','次/h','活跃',_amber],];returnGridView.count(crossAxisCount:2,shrinkWrap:true,physics:constNeverScrollableScrollPhysics(),mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:2.0,children:items.map((it){finalc=it[5]asColor;returnContainer(padding:constEdgeInsets.all(12),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Icon(it[0]asIconData,color:c,size:18),constSizedBox(width:6),Text(it[1]asString,style:constTextStyle(color:_sub,fontSize:12)),]),constSpacer(),Row(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(it[2]asString,style:constTextStyle(color:_ink,fontSize:22,fontWeight:FontWeight.w900)),constSizedBox(width:4),Padding(padding:constEdgeInsets.only(bottom:4),child:Text(it[3]asString,style:constTextStyle(color:_sub,fontSize:11))),]),Text(it[4]asString,style:TextStyle(color:c,fontSize:11,fontWeight:FontWeight.w700)),],),);}).toList(),);}

孕期指标通过 HealthKit 自动同步——孕妇佩戴的智能手表测量心率血压，数据实时进入 App。胎动可以让孕妇手动记录，每次胎动按一下，记录次数。

从「孕期指标卡」的医学专业性与孕妇友好设计角度再补一段。孕期需要监测的指标多达十几项——体重、血压、心率、胎心、胎动、宫高、腹围、血糖等。这段卡片用 2x3 网格展示 6 项核心指标，每项用「数值 + 单位 + 状态 chip」三件套呈现。状态 chip 用绿色（正常）、黄色（注意）、红色（异常）三色编码，配合医学正常范围让孕妇一眼判断「我的指标正常吗」。如果某项指标异常，可以在卡片下方加「咨询医生」按钮，接入 AI 助手提供专业孕期问答。鸿蒙 6.0 的 HealthKit 提供原生孕期数据 API，比 Android 端拼接第三方医疗 SDK 准确得多。

心得

孕期类 App 的视觉灵魂是"温暖 + 期待"——粉色给温暖感，宝宝大小可视化给期待感。开发时最容易犯的错是把医学指标做得过于冷峻，反而让孕妇焦虑。我的策略是用 emoji + 友好文字（“宝宝像一个芒果”）让信息变得温柔。从能力扩展角度，孕期应用最值得在鸿蒙端打造的是"HealthKit 孕妇专项数据 + PushKit 产检精准提醒 + HMS Account 家庭群组让丈夫参与 + CameraKit 报告 OCR"四件套。

总结

本篇实现了 Harmony 6.0 端的孕期管理首页，5 个模块、纯 UI、零依赖、约 360 行代码。第十四组的"心理 / 视力 / 孕期"三个迥异的健康类场景共用同一份骨架。从扩展角度建议生产业务里：把孕期数据接入 HealthKit；把产检提醒接入 PushKit；把家庭参与接入 HMS Account；把 B 超报告接入 CameraKit + NeuralNetworkRuntime；把"距预产期"做成 FormExtensionAbility 桌面卡片让全家随时可见。下一篇进入第二十八组——校园图书馆 / 实验室设备 / 奖学金。