基于 Harmony 6.0 应用的睡眠质量分析应用首页实现

基于 Harmony 6.0 应用的睡眠质量分析应用首页实现

前言

睡眠是健康的根本——一个人三分之一的时间在睡觉，但睡眠质量好坏直接决定了另外三分之二时间的精力。一款好的睡眠分析应用要把"昨晚睡了多久 / 深睡比例 / 睡眠评分 / 怎么改善"四件事在一屏内全部铺到。Harmony 6.0 时代，睡眠类应用迎来了几个独特的能力红利——HealthKit 自动汇聚手表心率和呼吸数据、SensorKit 提供加速度传感器侦测翻身、AudioKit 监测打鼾、超级终端让手机和手环数据无缝合并、AI 助手能力提供睡眠建议。本文用 Flutter 在 Harmony 6.0 上实现一个睡眠分析首页。

背景

睡眠类应用的视觉关键词是"宁静、深邃、夜晚"——深紫蓝 #312E81 配荧光紫 #A855F7 是这类应用的合适主色，深色优先既符合"夜晚"主题又能省 OLED 屏电量。本项目首页 5 个模块：渐变 Header（昨晚睡眠评分 + 大圆环）、睡眠四阶段分布（清醒 / 浅睡 / 深睡 / REM）、心率呼吸卡、本周睡眠时长趋势、AI 改善建议。从产品角度，睡眠应用最大的复购点是"每天醒来看昨晚怎么样"——用户起床后第一件事就是打开应用看睡眠评分。鸿蒙 6.0 桌面服务卡片让"睡眠评分"在桌面常驻可见，无需打开主 App。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在睡眠类应用上的能力栈完整——HealthKit 提供系统级睡眠数据、SensorKit 提供翻身检测、AudioKit 监测打鼾呼吸、超级终端让手环和手机数据自动汇聚、AI 助手能力提供睡眠建议、PushKit 提供"该睡觉了"提醒。Flutter 嵌入 Harmony 6.0 的方案在这种"重数据 + 轻交互"应用上非常合适。Skia 引擎对深紫蓝的渲染极其通透，OLED 屏深色省电，对睡眠这种夜间使用场景天然友好。

开发核心代码

代码一：睡眠评分 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF1E1B4B)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(children:[constRow(children:[Icon(Icons.bedtime,color:Colors.white,size:22),SizedBox(width:8),Text('睡眠分析',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.history,color:Colors.white,size:22),]),constSizedBox(height:14),constText('昨晚 23:18 - 06:42',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:16),Stack(alignment:Alignment.center,children:[SizedBox(width:160,height:160,child:CircularProgressIndicator(value:0.86,strokeWidth:14,backgroundColor:Colors.white.withValues(alpha:0.22),valueColor:constAlwaysStoppedAnimation(_accent),),),constColumn(children:[Text('睡眠评分',style:TextStyle(color:Colors.white70,fontSize:13)),SizedBox(height:4),Text('86',style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),Text('良好',style:TextStyle(color:_accent,fontSize:13,fontWeight:FontWeight.w700)),]),]),constSizedBox(height:14),constRow(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.access_time,color:Colors.white70,size:14),SizedBox(width:4),Text('共睡 7 小时 24 分 · 较周平均 +12 分',style:TextStyle(color:Colors.white70,fontSize:12)),]),]),);}

睡眠评分通过 HealthKit 综合多维度数据计算——总时长、深睡比例、心率稳定性、翻身次数等。HealthKit 让睡眠数据成为系统级健康档案的一部分，可与饮食、运动等数据交叉分析。

从「睡眠评分 Header」的氛围营造与数据呈现设计角度再补一段。睡眠类应用的 Header 必须传递「宁静、深邃、安心」的氛围。这段 Header 用深紫色到深蓝的渐变背景，配合大字号睡眠评分 + 评级 chip + 「昨晚 7h32min」时长副信息的多段式排版，让用户在打开应用的第一秒就感受到「夜晚的安静」。深紫色 + 深蓝色是夜晚的天色配色，是睡眠类应用最经典的色彩选择。如果未来要扩展支持「点击评分查看分项明细」，可以做一个折叠面板展开睡眠各维度数据，鸿蒙 6.0 的 AnimatedContainer 让折叠动画与系统帧率严格对齐。

代码二：睡眠四阶段分布

Widget_stages(){finalitems=const[['清醒',0.08,_amber],['浅睡',0.42,_cyan],['深睡',0.32,_accent],['REM',0.18,_purple],];returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:constColor(0xFF1F2937),borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('睡眠阶段',style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:14),ClipRRect(borderRadius:BorderRadius.circular(8),child:Row(children:items.map((it)=>Expanded(flex:((it[1]asdouble)*100).round(),child:Container(height:14,color:it[2]asColor))).toList()),),constSizedBox(height:14),Row(children:items.map((it){returnExpanded(child:Column(children:[Text('${((it[1]asdouble)*100).toInt()}%',style:TextStyle(color:it[2]asColor,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:2),Text(it[0]asString,style:constTextStyle(color:Colors.white60,fontSize:11)),]));}).toList()),]),);}

睡眠阶段数据来自手表的 SpO2 + 心率变异性 + 加速度传感器综合判断，鸿蒙的 SensorKit 让多源传感器协同极其顺滑。

从「睡眠四阶段分布」的医学数据可视化与色彩编码设计角度再补一段。睡眠四阶段（清醒、浅睡、深睡、REM）是医学界标准的分期方式，必须用色彩编码让用户快速识别。这段卡片用 4 段彩色横条按比例占据卡片宽度——清醒黄、浅睡浅蓝、深睡深紫、REM 紫红，让用户一眼掌握「我昨晚各阶段的占比」。每段下方加百分比文字标注，比纯图形更直观。如果未来要扩展支持「按夜逐段时间轴」（24 个 5 分钟切片显示整夜睡眠走势），可以用 Row 嵌入更细粒度的色块，鸿蒙 6.0 的 Skia 对 100+ 小色块的渲染开销极低。

代码三：本周趋势

Widget_weekTrend(){finalhours=const[7.4,6.8,7.2,8.0,6.5,7.8,7.4];finalmaxVal=hours.reduce((a,b)=>a>b?a:b);returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:constColor(0xFF1F2937),borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('本周睡眠时长',style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700)),constSizedBox(height:4),constText('平均 7.3 小时 · 推荐 7-9 小时',style:TextStyle(color:_accent,fontSize:12)),constSizedBox(height:14),SizedBox(height:100,child:Row(crossAxisAlignment:CrossAxisAlignment.end,mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){finalh=hours[i]/maxVal*70;finaldays=['一','二','三','四','五','六','日'];returnColumn(children:[Text('${hours[i]}h',style:constTextStyle(color:_accent,fontSize:11,fontWeight:FontWeight.w700)),constSizedBox(height:4),Container(width:14,height:h,decoration:BoxDecoration(color:_accent,borderRadius:BorderRadius.circular(4))),constSizedBox(height:6),Text(days[i],style:constTextStyle(color:Colors.white60,fontSize:11)),]);})),),]),);}

本周趋势用 7 根渐变柱子展示一周睡眠时长，每根柱子按hours[i] / maxVal * 80归一化高度。深紫色渐变柱配合底部「周一」「周二」标签，是睡眠类应用的标准趋势图。鸿蒙 6.0 端 Skia 对这种小柱状图的渲染开销极低，即使每秒重绘也不会卡顿。

从「本周趋势」的睡眠规律识别与健康洞察设计角度再补一段。睡眠类应用的核心是「让用户看到自己的睡眠规律」——周末是不是熬夜、周几睡得最好。这段趋势图用「7 根柱子 + 横轴星期」的简洁布局，让用户一眼识别一周的睡眠模式。如果某天睡眠时长低于 6 小时，可以让那根柱子变红色高亮，配合上方的「平均 7h12min」副信息，用户能直接理解「我哪天睡眠不达标」。如果未来要扩展支持「按月查看」「按睡眠质量过滤」，可以在卡片顶部加 chip 切换栏，鸿蒙 6.0 的 Skia 对动态柱状图渲染开销极低。

心得

睡眠类 App 的视觉灵魂是"宁静 + 深邃"——深紫色配荧光紫给夜晚科技感。开发时最容易犯的错是把数据展示得过于密集，反而让用户起床第一眼就感到压力。我的策略是用大圆环把"睡眠评分"做成一个数字承载所有信息。从能力扩展角度，睡眠应用最值得在鸿蒙端打造的是"HealthKit 系统级数据 + SensorKit 多源传感 + 超级终端手环手机汇聚 + AI 助手建议"四件套。

总结

本篇实现了 Harmony 6.0 端的睡眠分析首页，5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里：把睡眠数据接入 HealthKit；把翻身检测接入 SensorKit；把多设备数据接入超级终端；把"昨晚评分"做成 FormExtensionAbility 桌面卡片；把改善建议接入 AI 助手。下一篇是第十二组的第二块——健身训练计划生成器。