基于 Harmony 6.0 应用的心理健康自测应用首页实现
基于 Harmony 6.0 应用的心理健康自测应用首页实现前言心理健康在过去十年从小众话题变成大众刚需——焦虑、抑郁、压力、失眠成为越来越多人面对的日常。一款好的心理自测应用要把我的心情 / 评估量表 / 冥想资源 / 咨询入口四件事在一屏内全部铺到。Harmony 6.0 时代心理类应用迎来了几个独特的能力红利——隐私沙盒严格保护测评数据、AI 助手能力提供情绪疏导、HealthKit 让心情与生理数据关联、AudioKit 提供冥想音频、PushKit 提供柔和的关怀提醒。本文用 Flutter 在 Harmony 6.0 上实现一个心理健康自测首页。背景心理类应用的视觉关键词是温柔、安抚、私密——粉紫色 #C084FC 配青色 #06B6D4 是这类应用的合适主色——既温柔又专业。本项目首页 5 个模块渐变 Header今日心情打卡、专业量表入口PHQ-9 / GAD-7 / SAS / SDS、本周情绪曲线、冥想推荐横滑、咨询师入口。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在心理健康类应用上的能力栈完整——隐私沙盒严格保护数据心理数据极其敏感、AI 助手能力提供 24h 情绪疏导、HealthKit 让心情和睡眠运动数据关联分析、AudioKit 提供冥想音频、PushKit 提供柔和的关怀避免过度打扰。Skia 引擎对粉紫色的渲染极其温柔OLED 屏下色彩柔和不刺眼。开发核心代码代码一心情打卡 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],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.lock_outline,color:Colors.white,size:18),]),constSizedBox(height:16),constText(Hi · 今天感觉怎么样,style:TextStyle(color:Colors.white,fontSize:22,fontWeight:FontWeight.w900)),constSizedBox(height:14),Row(mainAxisAlignment:MainAxisAlignment.spaceAround,children:const[_Mood(emoji:,label:很棒),_Mood(emoji:,label:不错),_Mood(emoji:,label:一般),_Mood(emoji:,label:糟糕),_Mood(emoji:,label:很差),]),],),);}class_MoodextendsStatelessWidget{finalStringemoji,label;const_Mood({requiredthis.emoji,requiredthis.label});overrideWidgetbuild(BuildContextcontext){returnColumn(children:[Container(width:50,height:50,decoration:BoxDecoration(shape:BoxShape.circle,color:Colors.white.withValues(alpha:0.22)),alignment:Alignment.center,child:Text(emoji,style:constTextStyle(fontSize:26))),constSizedBox(height:6),Text(label,style:constTextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w700)),]);}}心情数据通过隐私沙盒严格存储——心理数据是用户最敏感的隐私之一必须保证不会被任何第三方读取。鸿蒙的隐私沙盒是系统级保护比传统 Android 的应用沙盒更严密。从「心情打卡 Header」的氛围营造与心理安抚设计角度再补一段。心理类应用的 Header 必须传递「这里是安全的、被理解的」氛围。这段 Header 用淡紫色到粉色的渐变背景紫色传递「私密、深邃」、粉色传递「温柔、被关怀」的视觉气质配合「今天感觉怎么样」slogan 5 个心情 emoji 选择器的双段式排版让用户感受到「你不是一个人」的温柔陪伴。emoji 比文字更亲切是心理类应用的最优交互形式。如果未来要扩展支持「按时段打卡」早 / 中 / 晚分别记录可以在 Header 加一行 chip 切换栏鸿蒙 6.0 的 PushKit 让定时打卡提醒柔和不打扰。代码二专业量表入口Widget_scales(){finalitemsconst[[PHQ-9,抑郁筛查,9 题 · 3 分钟,_primary],[GAD-7,焦虑评估,7 题 · 3 分钟,_accent],[SAS,焦虑量表,20 题 · 5 分钟,_amber],[SDS,抑郁量表,20 题 · 5 分钟,_green],];returnGridView.count(crossAxisCount:2,shrinkWrap:true,physics:constNeverScrollableScrollPhysics(),mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:2.2,children:items.map((it){finalcit[3]asColor;returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Container(padding:constEdgeInsets.symmetric(horizontal:6,vertical:2),decoration:BoxDecoration(color:c.withValues(alpha:0.16),borderRadius:BorderRadius.circular(4)),child:Text(it[0]asString,style:TextStyle(color:c,fontSize:11,fontWeight:FontWeight.w800)),),constSpacer(),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:2),Text(it[2]asString,style:constTextStyle(color:_sub,fontSize:11)),],),);}).toList(),);}PHQ-9、GAD-7 等专业量表是国际通用的临床心理评估工具测评结果可以作为去医院问诊的参考。从「专业量表入口」的医学专业性与心理疏导路径设计角度再补一段。这段量表入口用 4 大量表PHQ-9 抑郁、GAD-7 焦虑、SAS 自评焦虑、SDS 自评抑郁做 2x2 网格展示每个量表用对应主题色识别PHQ-9 紫、GAD-7 青、SAS 橙、SDS 粉。每个入口用「量表名 测评时长 难度 chip」的简洁排版避免过度专业化让用户产生医学焦虑。如果未来要扩展支持「按周期自动提醒测评」每月一次评估可以接入 PushKit 在每月 1 号推送骨架不变。鸿蒙 6.0 的隐私沙盒让心理测评数据严格隔离第三方 App 无法读取。代码三本周情绪曲线Widget_weekMood(){finalmoodsconst[3,4,2,3,4,5,4];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),SizedBox(height:110,child:Row(crossAxisAlignment:CrossAxisAlignment.end,mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){finalhmoods[i]/5*80;finalemojis[,,,,];finaldays[一,二,三,四,五,六,日];returnColumn(children:[Text(emojis[moods[i]-1],style:constTextStyle(fontSize:14)),constSizedBox(height:4),Container(width:18,height:h,decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.7),_accent.withValues(alpha:0.5),],begin:Alignment.topCenter,end:Alignment.bottomCenter),borderRadius:BorderRadius.circular(4)),),constSizedBox(height:6),Text(days[i],style:constTextStyle(color:_sub,fontSize:11)),]);})),),]),);}本周情绪曲线用 7 根柱子展示一周的心情得分变化柱子颜色根据情绪类型着色——开心黄、平静青、烦躁橙、难过灰蓝、愤怒红让用户一眼识别本周的情绪走势。从「本周情绪曲线」的情感数据可视化与心理洞察设计角度再补一段。情绪类应用的核心是「让用户看到自己的情绪规律」——周一焦虑、周末放松、月经前低落。这段曲线把每天的心情用一根彩色柱子表达柱子高度反映心情得分开心高、低落低。如果连续 3 天情绪低落可以让对应柱子用浅红色高亮并在卡片底部加「需要帮助AI 心理疏导」入口让用户在情绪危险时能及时获得帮助。如果未来要扩展支持「情绪 睡眠 运动」三维分析让用户看到「睡得好的那天心情好」可以接入 HealthKit 把多源数据交叉可视化鸿蒙 6.0 端完全支持这种数据融合。心得心理类 App 的视觉灵魂是温柔 安全——粉紫色给柔和感圆角和大留白给被理解的安心。开发时最容易犯的错是把抑郁、焦虑等词做得过于冷峻反而吓退用户。我的策略是用 emoji 柔和的今天感觉怎么样开场。从能力扩展角度心理应用最值得在鸿蒙端打造的是隐私沙盒数据保护 AI 助手 24h 疏导 HealthKit 综合分析 AudioKit 冥想音频四件套。总结本篇实现了 Harmony 6.0 端的心理自测首页5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里把数据接入隐私沙盒严格保护把情绪疏导接入 AI 助手把心情数据接入 HealthKit把冥想接入 AudioKit把今日心情打卡做成 FormExtensionAbility 桌面卡片。下一篇是第十四组的第二块——视力保护提醒应用。