企业官网建设流程全解析

基于 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 屏下色彩柔和不刺眼。

开发核心代码

代码一：心情打卡 Header

Widget_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(){finalitems=const[['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){finalc=it[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(){finalmoods=const[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){finalh=moods[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 桌面卡片。下一篇是第十四组的第二块——视力保护提醒应用。