基于 Harmony 6.0 应用的中医体质测评应用首页实现

基于 Harmony 6.0 应用的中医体质测评应用首页实现

前言

中医体质学说把人分为九种基本体质——平和、气虚、阳虚、阴虚、痰湿、湿热、血瘀、气郁、特禀。一款好的中医体质测评应用要把"我的体质类型 / 调理建议 / 节气养生 / 食疗推荐"四件事在一屏内全部铺到。Harmony 6.0 时代，中医类应用迎来了几个独特的能力红利——HealthKit 让脉搏舌苔数据进入系统级档案、AI 助手能力提供辨证论治、CameraKit + NeuralNetworkRuntime 让舌苔识别端侧推理、超级终端让医师可视化大屏会诊。本文用 Flutter 在 Harmony 6.0 上实现一个中医体质测评首页。

背景

中医类应用的视觉关键词是"古韵、自然、温和"——深棕 #92400E 配米黄 #FEF3C7 配青绿 #047857 是这类应用的合适主色——既"国风"又"本草"。本项目首页 5 个模块：渐变 Header（我的体质 + 大复测按钮）、9 大体质雷达图、节气养生卡、推荐食疗横滑、中医师在线咨询。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在中医类应用上的能力栈完整——HealthKit 提供生理数据存档、AI 助手能力提供辨证、CameraKit + NeuralNetworkRuntime 提供舌苔识别、超级终端让医师可远程会诊、PushKit 提供节气养生提醒。

开发核心代码

代码一：体质 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF78350F)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.spa,color:Colors.white,size:22),SizedBox(width:8),Text('中医体质',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.history_edu,color:Colors.white,size:22),]),constSizedBox(height:14),constText('您的主体质',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constText('阴虚质 + 气郁质',style:TextStyle(color:Colors.white,fontSize:26,fontWeight:FontWeight.w900)),constSizedBox(height:6),constText('上次测评 · 30 天前 · 建议每月一次',style:TextStyle(color:Colors.white70,fontSize:12)),constSizedBox(height:14),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.refresh,color:_primary,size:22),SizedBox(width:6),Text('重新测评 · AI 辅助',style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),],),);}

测评通过填写问卷 + AI 助手能力辨证 + CameraKit 拍舌苔综合得出体质类型。鸿蒙的 NeuralNetworkRuntime 让舌苔识别在端侧完成，避免上传敏感的健康影像。

从「体质 Header」的中医文化氛围与可信感设计角度再补一段。中医体质类应用的 Header 必须传递「专业、传统、可信」的氛围。这段 Header 用墨绿色到深棕的渐变背景，墨绿传递「养生、自然」、深棕传递「传统、稳重」的视觉气质，配合「您的体质 · 阴虚质」的辨证结果 + 重新测评按钮的双段式排版，让用户对体质判断有专业认同感。如果未来要扩展支持「按节气、年龄段更新体质」，可以接入鸿蒙 6.0 的日期 API 自动提示用户「立秋了，建议重新测评」，骨架完全不动。

代码二：9 大体质雷达图

Widget_radarStats(){finalitems=const[['平和',0.4,_green],['气虚',0.3,_amber],['阳虚',0.2,_accent],['阴虚',0.8,_red],['痰湿',0.3,_cyan],['湿热',0.5,_orange],['血瘀',0.2,_purple],['气郁',0.7,_pink],['特禀',0.1,_sub],];returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('9 种体质分布',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:14),...items.map((it){finalc=it[2]asColor;finalv=it[1]asdouble;returnPadding(padding:constEdgeInsets.only(bottom:8),child:Row(children:[SizedBox(width:36,child:Text(it[0]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w700))),constSizedBox(width:8),Expanded(child:ClipRRect(borderRadius:BorderRadius.circular(3),child:LinearProgressIndicator(value:v,minHeight:8,backgroundColor:c.withValues(alpha:0.12),valueColor:AlwaysStoppedAnimation(c)),)),constSizedBox(width:8),SizedBox(width:36,child:Text('${(v*100).toInt()}',textAlign:TextAlign.right,style:TextStyle(color:c,fontSize:12,fontWeight:FontWeight.w800))),]),);}),]),);}

体质数据按九分制评分，超过 50 分的记为该类体质——很多人会同时具备 2-3 种体质特征，这种"多体质共存"是中医辨证的真实情况。

从「9 大体质雷达图」的多维健康可视化与中医辨证设计角度再补一段。中医九大体质（平和、阴虚、阳虚、痰湿、湿热、气虚、血瘀、特禀、气郁）覆盖了所有体质类型。雷达图把 9 个维度的得分一次性可视化，让用户能直观看到「自己偏向哪几种体质」。每个体质用对应主题色识别（平和绿、阴虚红、阳虚橙、痰湿青、湿热黄等），既符合中医五行色相又便于辨识。雷达图中央的多边形面积越大表示问题越多，是直观的健康警示。鸿蒙 6.0 端 Skia 的 CustomPaint 自绘对雷达图渲染开销极低，每秒重绘也不会卡顿。

代码三：节气养生卡

Widget_solar(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(gradient:LinearGradient(colors:[_green.withValues(alpha:0.12),_amber.withValues(alpha:0.12),]),borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.eco,color:_green,size:20),SizedBox(width:6),Text('小满 · 5 月 21 日',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),Spacer(),Text('当前节气',style:TextStyle(color:_green,fontSize:11,fontWeight:FontWeight.w700)),]),constSizedBox(height:10),constText('湿热渐重 · 重在祛湿',style:TextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:8),constText('小满后湿气加重，您的阴虚体质宜多食苦瓜、莲子、薏米。''辰时（7-9 点）梳头百次有助通阳气。',style:TextStyle(color:_ink,fontSize:12,height:1.5)),]),);}

节气数据通过 PushKit 在每个节气当天自动推送养生提醒——把"二十四节气"这种传统文化数字化呈现，是 Harmony 6.0 端文化型应用的独特价值。

从「节气养生卡」的传统文化数字化与场景化提醒设计角度再补一段。二十四节气是中国独有的时间系统——每个节气对应特定的养生方法（立春养肝、惊蛰防风、谷雨祛湿等）。这段卡片用「节气名 + 节气图标 + 养生建议 + 推荐食材」的四段式排版，让用户在每个节气当天打开应用就能看到对应的养生指导。节气图标用单色国风插画（云、雨、雪、麦穗），与现代 UI 形成「东方美学 + 现代设计」的混搭风。如果未来要扩展支持「跟着节气吃」（每个节气推荐 7 个食谱），可以在卡片下方加横滑食谱列表，鸿蒙 6.0 的 PushKit 让节气当日推送精准到达，配合 FormExtensionAbility 把当日节气信息做成桌面卡片，整个体验非常完整。

心得

中医类 App 的视觉灵魂是"古韵 + 温和"——深棕米黄给国风感，圆角和留白给"温柔不焦虑"。开发时最容易犯的错是把中医术语展示得过于晦涩，反而让普通用户看不懂。我的策略是用大字号的"主体质 + 简短解读"做核心呈现。从能力扩展角度，中医应用最值得在鸿蒙端打造的是"NeuralNetworkRuntime 舌苔识别 + AI 助手辨证 + HealthKit 系统级档案 + PushKit 节气提醒"四件套。

总结

本篇实现了 Harmony 6.0 端的中医体质测评首页，5 个模块、纯 UI、零依赖、约 340 行代码。第十二组的"睡眠 / 健身 / 中医"三个迥异的健康类场景共用同一份骨架。从扩展角度建议生产业务里：把舌苔识别接入 NeuralNetworkRuntime；把辨证接入 AI 助手；把体质数据接入 HealthKit；把节气提醒接入 PushKit；把"当前节气养生"做成 FormExtensionAbility 桌面卡片。下一篇进入第十三组——饮水提醒 / 跑步配速 / 老人跌倒。