基于 Harmony 6.0 应用的亲子阅读打卡应用首页实现前言亲子阅读是培养孩子阅读习惯的最佳方式——每天 15 分钟让书成为孩子最好的朋友。一款好的亲子阅读应用要把今日打卡 / 我的书架 / 共读统计 / 推荐绘本四件事在一屏内全部铺到。Harmony 6.0 时代亲子阅读类应用迎来了几个独特的能力红利——AudioKit 让父母语音录读、HealthKit 让阅读时长进入儿童健康档案、HMS Account 家庭群组让爸妈接力、超级终端让平板大屏看绘本、AI 助手能力提供绘本推荐。本文用 Flutter 在 Harmony 6.0 上实现一个亲子阅读打卡首页。背景亲子阅读类应用的视觉关键词是温暖、童趣、激励——粉色 #F472B6 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块渐变 Header连续打卡 大开始按钮、4 大年龄段、共读统计、本月好书、阅读勋章。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在亲子阅读类应用上的能力栈完整——AudioKit 让父母可以录制语音陪读、HealthKit 让儿童阅读时长沉淀、HMS Account 家庭群组让爸妈协同、超级终端让平板成为阅读屏幕、AVCodecKit 提供绘本动画。开发核心代码代码一连续打卡 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(28),),child:Column(children:[constRow(children:[Icon(Icons.menu_book,color:Colors.white,size:22),SizedBox(width:8),Text(亲子共读,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:_gold,borderRadius:BorderRadius.all(Radius.circular(6))),child:Row(children:[Icon(Icons.local_fire_department,color:Colors.white,size:12),SizedBox(width:4),Text(186 天,style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w800)),]),),]),constSizedBox(height:18),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(适合 3-5 岁 · 15 分钟,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.play_arrow,color:_primary,size:22),SizedBox(width:6),Text(开始今日共读,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}共读时父母可以通过 AudioKit 录制语音读书——孩子在父母出差时仍能听到爸妈的声音读绘本。从「连续打卡 Header」的亲子陪伴与习惯养成设计角度再补一段。亲子阅读类应用的 Header 必须把「连续共读天数 今天是否完成」做成视觉中心。这段 Header 用暖橙到粉色的亲子渐变配合「连续共读 X 天」 「今日绘本」 「开始共读」按钮让家长感到这是每天都要坚持的小仪式。如果未来要扩展支持「分角色朗读」可以让父母和孩子分别录制角色音频。鸿蒙 6.0 的 AudioKit 让远程陪伴更有温度。代码二4 大年龄段Widget_ages(){finalitemsconst[[,0-2 岁,_accent],[,3-5 岁,_primary],[,6-8 岁,_amber],[,9-12 岁,_green],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[2]asColor;returnExpanded(child:Column(children:[Container(width:56,height:56,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(18)),alignment:Alignment.center,child:Text(it[0]asString,style:constTextStyle(fontSize:28)),),constSizedBox(height:6),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w800)),]));}).toList()),);}4 大年龄段0-2、3-5、6-8、9-12帮助家长按孩子认知水平选择绘本。不同年龄段关注点不同低龄看图和声音中龄看故事高龄看表达和理解。从「4 大年龄段」的儿童发展规律与内容分级设计角度再补一段。亲子阅读最怕内容过难或过浅年龄段入口能降低选书成本。每个年龄段应配推荐书单、阅读时长建议和互动提问模板。如果未来要扩展支持「阅读能力测评」可以根据孩子答题和复述能力动态调整推荐年龄段。鸿蒙 6.0 的 AI 助手可以生成适龄的共读提问让家长不会只会照着念。代码三共读统计Widget_stats(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:[Expanded(child:Column(children:const[Text(已读绘本,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(86,style:TextStyle(color:_primary,fontSize:26,fontWeight:FontWeight.w900)),Text(本,style:TextStyle(color:_sub,fontSize:11)),])),Container(width:1,height:50,color:Colors.black12),Expanded(child:Column(children:const[Text(累计时长,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(128,style:TextStyle(color:_accent,fontSize:26,fontWeight:FontWeight.w900)),Text(小时,style:TextStyle(color:_sub,fontSize:11)),])),Container(width:1,height:50,color:Colors.black12),Expanded(child:Column(children:const[Text(阅读勋章,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(12,style:TextStyle(color:_gold,fontSize:26,fontWeight:FontWeight.w900)),Text(枚,style:TextStyle(color:_sub,fontSize:11)),])),]),);}阅读数据通过 HealthKit 拓展类目让亲子阅读时长成为儿童健康档案的一部分——比单纯统计更有意义。从「共读统计」的亲子陪伴质量与成长记录设计角度再补一段。共读统计不应该只看总时长还应展示阅读天数、完成绘本数、孩子最喜欢的主题和亲子互动次数。这样家长能看到陪伴质量而不是单纯刷时长。如果未来要扩展支持「成长报告」AI 可以把一个月的阅读数据生成亲子阅读总结。鸿蒙 6.0 的家庭群组让爸爸妈妈都能记录和查看同一份阅读档案。心得亲子阅读类 App 的视觉灵魂是温暖 童趣——粉橙色给亲子温度emoji 年龄段给亲切。开发时最容易犯的错是 UI 太成人化让孩子失去兴趣。我的策略是用大字号 emoji 卡通元素。从能力扩展角度亲子阅读最值得在鸿蒙端打造的是AudioKit 父母录读 HealthKit 阅读档案 超级终端平板大屏 AI 助手绘本推荐四件套。总结本篇实现了 Harmony 6.0 端的亲子阅读首页5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里把语音录读接入 AudioKit把阅读时长接入 HealthKit把平板大屏接入超级终端把今日打卡做成 FormExtensionAbility 桌面卡片把绘本推荐接入 AI 助手。下一篇是第五十组的最后一块——家庭财务规划助手也是本系列 150 篇文章的最终篇。
基于 Harmony 6.0 应用的亲子阅读打卡应用首页实现
基于 Harmony 6.0 应用的亲子阅读打卡应用首页实现前言亲子阅读是培养孩子阅读习惯的最佳方式——每天 15 分钟让书成为孩子最好的朋友。一款好的亲子阅读应用要把今日打卡 / 我的书架 / 共读统计 / 推荐绘本四件事在一屏内全部铺到。Harmony 6.0 时代亲子阅读类应用迎来了几个独特的能力红利——AudioKit 让父母语音录读、HealthKit 让阅读时长进入儿童健康档案、HMS Account 家庭群组让爸妈接力、超级终端让平板大屏看绘本、AI 助手能力提供绘本推荐。本文用 Flutter 在 Harmony 6.0 上实现一个亲子阅读打卡首页。背景亲子阅读类应用的视觉关键词是温暖、童趣、激励——粉色 #F472B6 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块渐变 Header连续打卡 大开始按钮、4 大年龄段、共读统计、本月好书、阅读勋章。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在亲子阅读类应用上的能力栈完整——AudioKit 让父母可以录制语音陪读、HealthKit 让儿童阅读时长沉淀、HMS Account 家庭群组让爸妈协同、超级终端让平板成为阅读屏幕、AVCodecKit 提供绘本动画。开发核心代码代码一连续打卡 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(28),),child:Column(children:[constRow(children:[Icon(Icons.menu_book,color:Colors.white,size:22),SizedBox(width:8),Text(亲子共读,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:_gold,borderRadius:BorderRadius.all(Radius.circular(6))),child:Row(children:[Icon(Icons.local_fire_department,color:Colors.white,size:12),SizedBox(width:4),Text(186 天,style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w800)),]),),]),constSizedBox(height:18),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(适合 3-5 岁 · 15 分钟,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.play_arrow,color:_primary,size:22),SizedBox(width:6),Text(开始今日共读,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}共读时父母可以通过 AudioKit 录制语音读书——孩子在父母出差时仍能听到爸妈的声音读绘本。从「连续打卡 Header」的亲子陪伴与习惯养成设计角度再补一段。亲子阅读类应用的 Header 必须把「连续共读天数 今天是否完成」做成视觉中心。这段 Header 用暖橙到粉色的亲子渐变配合「连续共读 X 天」 「今日绘本」 「开始共读」按钮让家长感到这是每天都要坚持的小仪式。如果未来要扩展支持「分角色朗读」可以让父母和孩子分别录制角色音频。鸿蒙 6.0 的 AudioKit 让远程陪伴更有温度。代码二4 大年龄段Widget_ages(){finalitemsconst[[,0-2 岁,_accent],[,3-5 岁,_primary],[,6-8 岁,_amber],[,9-12 岁,_green],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[2]asColor;returnExpanded(child:Column(children:[Container(width:56,height:56,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(18)),alignment:Alignment.center,child:Text(it[0]asString,style:constTextStyle(fontSize:28)),),constSizedBox(height:6),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w800)),]));}).toList()),);}4 大年龄段0-2、3-5、6-8、9-12帮助家长按孩子认知水平选择绘本。不同年龄段关注点不同低龄看图和声音中龄看故事高龄看表达和理解。从「4 大年龄段」的儿童发展规律与内容分级设计角度再补一段。亲子阅读最怕内容过难或过浅年龄段入口能降低选书成本。每个年龄段应配推荐书单、阅读时长建议和互动提问模板。如果未来要扩展支持「阅读能力测评」可以根据孩子答题和复述能力动态调整推荐年龄段。鸿蒙 6.0 的 AI 助手可以生成适龄的共读提问让家长不会只会照着念。代码三共读统计Widget_stats(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:[Expanded(child:Column(children:const[Text(已读绘本,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(86,style:TextStyle(color:_primary,fontSize:26,fontWeight:FontWeight.w900)),Text(本,style:TextStyle(color:_sub,fontSize:11)),])),Container(width:1,height:50,color:Colors.black12),Expanded(child:Column(children:const[Text(累计时长,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(128,style:TextStyle(color:_accent,fontSize:26,fontWeight:FontWeight.w900)),Text(小时,style:TextStyle(color:_sub,fontSize:11)),])),Container(width:1,height:50,color:Colors.black12),Expanded(child:Column(children:const[Text(阅读勋章,style:TextStyle(color:_sub,fontSize:11)),SizedBox(height:6),Text(12,style:TextStyle(color:_gold,fontSize:26,fontWeight:FontWeight.w900)),Text(枚,style:TextStyle(color:_sub,fontSize:11)),])),]),);}阅读数据通过 HealthKit 拓展类目让亲子阅读时长成为儿童健康档案的一部分——比单纯统计更有意义。从「共读统计」的亲子陪伴质量与成长记录设计角度再补一段。共读统计不应该只看总时长还应展示阅读天数、完成绘本数、孩子最喜欢的主题和亲子互动次数。这样家长能看到陪伴质量而不是单纯刷时长。如果未来要扩展支持「成长报告」AI 可以把一个月的阅读数据生成亲子阅读总结。鸿蒙 6.0 的家庭群组让爸爸妈妈都能记录和查看同一份阅读档案。心得亲子阅读类 App 的视觉灵魂是温暖 童趣——粉橙色给亲子温度emoji 年龄段给亲切。开发时最容易犯的错是 UI 太成人化让孩子失去兴趣。我的策略是用大字号 emoji 卡通元素。从能力扩展角度亲子阅读最值得在鸿蒙端打造的是AudioKit 父母录读 HealthKit 阅读档案 超级终端平板大屏 AI 助手绘本推荐四件套。总结本篇实现了 Harmony 6.0 端的亲子阅读首页5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里把语音录读接入 AudioKit把阅读时长接入 HealthKit把平板大屏接入超级终端把今日打卡做成 FormExtensionAbility 桌面卡片把绘本推荐接入 AI 助手。下一篇是第五十组的最后一块——家庭财务规划助手也是本系列 150 篇文章的最终篇。
