基于 Harmony 6.0 应用的视力保护提醒应用首页实现

基于 Harmony 6.0 应用的视力保护提醒应用首页实现

前言

数字时代用眼过度成为新国民健康问题——每天 8 小时盯电脑、3 小时刷手机，干眼、近视、视疲劳成为家常便饭。一款好的视力保护应用要把"今日用眼时长 / 距离上次休息 / 视力训练 / 蓝光防护"四件事在一屏内全部铺到。Harmony 6.0 时代，视力保护类应用迎来了几个独特的能力红利——HealthKit 让用眼时长进入系统级档案、PushKit 让"用眼 30 分钟该休息了"精准触达、SensorKit 距离传感器检测看屏幕距离、超级终端让多设备用眼时间合并统计。本文用 Flutter 在 Harmony 6.0 上实现一个视力保护首页。

背景

视力保护类应用的视觉关键词是"清新、护眼、温柔"——绿色 #16A34A 配米黄 #FEF3C7 是这类应用的合适主色——绿色本身就是护眼色。本项目首页 5 个模块：渐变 Header（用眼时长 + 大休息按钮）、20-20-20 法则提示、视力训练入口、本周护眼报告、屏幕亮度自动调节。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在视力保护类应用上的能力栈完整——HealthKit 提供用眼时长存档、PushKit 提供精准休息提醒、SensorKit 提供距离 / 光线传感、超级终端让多设备用眼数据汇总（手机 + 平板 + 电脑）、AI 助手能力提供个性化护眼建议。鸿蒙的系统级护眼模式让蓝光过滤可在 App 一键切换。

开发核心代码

代码一：用眼时长 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF15803D)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(children:[constRow(children:[Icon(Icons.visibility,color:Colors.white,size:22),SizedBox(width:8),Text('护眼小助手',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.tune,color:Colors.white,size:22),]),constSizedBox(height:18),constText('今日用眼时长',style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:6),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text('5h 42m',style:TextStyle(color:Colors.white,fontSize:44,fontWeight:FontWeight.w900)),SizedBox(width:10),Padding(padding:EdgeInsets.only(bottom:8),child:Text('· 已超目标',style:TextStyle(color:Color(0xFFFB923C),fontSize:13,fontWeight:FontWeight.w700))),]),constSizedBox(height:6),constText('距上次休息 · 38 分钟',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.spa,color:_primary,size:22),SizedBox(width:6),Text('立即休息眼睛 · 20 秒',style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}

用眼时长通过鸿蒙系统级 API 统计 App 前台时间——只要屏幕亮着且 App 在前台，时间就在累加。HealthKit 让多设备用眼时间合并统计——用户在手机上看了 2 小时，平板上看了 1 小时，统一显示 3 小时。

从「用眼时长 Header」的健康警示与休息引导设计角度再补一段。视力保护类应用的 Header 必须把「我今天看屏幕多久」这件事在一眼内交代。这段 Header 用主绿色到深绿的渐变背景（绿色本身就是护眼色），配合「今日已用眼 5h32min」大字号 + 「立即休息」按钮的双段式排版，让用户既能感知用眼时长又能快速行动。如果用眼超过 6 小时，可以让 Header 背景从绿色变橙色甚至红色，给用户视觉警示。鸿蒙 6.0 的超级终端让多设备用眼时长合并统计，避免「在手机看少了在电脑看多了但不知道」的盲区。

代码二：20-20-20 法则提示

Widget_rule(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.12),_amber.withValues(alpha:0.12),]),borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.lightbulb_outline,color:_amber,size:20),SizedBox(width:6),Text('20-20-20 护眼法则',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),]),constSizedBox(height:10),constText('每用眼 20 分钟，看 20 英尺（6 米）外的物体 20 秒。''让睫状肌放松，预防干眼和近视加深。',style:TextStyle(color:_ink,fontSize:12,height:1.6)),]),);}

20-20-20 法则是医学认可的护眼方法。PushKit 每 20 分钟在后台静默推送一次"该让眼睛休息了"——鸿蒙的推送通道是系统级保活，不会被用户聚精会神工作时漏掉。

从「20-20-20 法则提示」的医学知识普及与精准提醒设计角度再补一段。20-20-20 法则（每用眼 20 分钟，看 20 英尺外的景物 20 秒）是眼科医生公认的护眼黄金法则。这段提示卡片把法则做成「20 + 20 + 20」三个数字 + 简短说明的可视化呈现，让用户一眼记住这个简单又有效的护眼方法。卡片用浅米黄色背景，与主绿色的 Header 形成柔和对比，避免刺眼。如果用户连续工作超过 20 分钟没休息，可以让卡片用动画轻微闪烁提醒（避免过度打扰）。鸿蒙 6.0 的 PushKit 系统级保活让每 20 分钟的提醒精准到达，比传统 Android 闹钟可靠太多。

代码三：本周护眼报告

Widget_weekReport(){finalhours=const[4.2,5.8,6.4,5.2,7.1,4.8,5.5];finalmaxVal=hours.reduce((a,b)=>a>b?a:b);returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Text('本周用眼报告',style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),Spacer(),Text('日均 5.5h · 超标 2 天',style:TextStyle(color:_amber,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:14),SizedBox(height:100,child:Row(crossAxisAlignment:CrossAxisAlignment.end,mainAxisAlignment:MainAxisAlignment.spaceBetween,children:List.generate(7,(i){finalh=hours[i]/maxVal*70;finalc=hours[i]>6?_red:_primary;finaldays=['一','二','三','四','五','六','日'];returnColumn(children:[Text('${hours[i]}h',style:TextStyle(color:c,fontSize:11,fontWeight:FontWeight.w700)),constSizedBox(height:4),Container(width:14,height:h,decoration:BoxDecoration(color:c,borderRadius:BorderRadius.circular(4))),constSizedBox(height:6),Text(days[i],style:constTextStyle(color:_sub,fontSize:11)),]);})),),]),);}

超标天用红色柱子区分——视觉上一眼能看到哪几天用眼过度，提醒用户调整。

从「本周护眼报告」的健康预警与可视化设计角度再补一段。视力保护应用的核心是「让用户意识到自己用眼过度」。这段报告用 7 根柱子展示一周每日用眼时长，超标的天用红色柱子高亮，达标的用绿色柱子，让用户一眼识别哪天该让眼睛休息。卡片顶部显示「日均 5.5h · 超标 2 天」的概括数据，让用户掌握全局节奏。如果未来要扩展支持「分时段统计」（看屏幕的前半天 vs 后半天 vs 夜晚），可以把柱子细分为时段段落色块。鸿蒙 6.0 的 HealthKit 让用眼时长成为系统级健康档案的一部分，可以与睡眠数据交叉分析。

心得

视力保护类 App 的视觉灵魂是"清新 + 温柔"——绿色给护眼天然色，圆角给舒适感。开发时最容易犯的错是用太亮太刺眼的颜色，反而违背"护眼"主题。我的策略是用浅色主色 + 大留白。从能力扩展角度，视力保护最值得在鸿蒙端打造的是"HealthKit 多设备用眼汇总 + PushKit 20 分钟提醒 + SensorKit 距离检测 + 系统级蓝光过滤"四件套。

总结

本篇实现了 Harmony 6.0 端的视力保护首页，5 个模块、纯 UI、零依赖、约 300 行代码。从扩展角度建议生产业务里：把用眼时长接入 HealthKit；把 20 分钟提醒接入 PushKit；把距离检测接入 SensorKit；把"今日已用眼"做成 FormExtensionAbility 桌面卡片；把多设备汇总接入超级终端。下一篇是第十四组的最后一块——孕期管理助手。