基于 Harmony 6.0 应用的儿童数学启蒙应用首页实现前言数学启蒙是 4-8 岁儿童最关键的认知发展阶段——数感、空间观念、逻辑思维等核心能力都在这段时间形成。一款好的数学启蒙应用要把今天玩什么 / 我学了哪些 / 我得了多少星 / 家长能不能看进度这四件事在一屏内全部铺到。Harmony 6.0 时代儿童学习应用迎来了几个独特的能力红利——HealthKit 的用眼时长统计让护眼成为系统级能力、HMS Account 的家庭群组让家长一键查看孩子进度、超级终端让学习内容能在智慧屏大画面上玩、AI 助手能力让动画讲解更生动。本文用 Flutter 在 Harmony 6.0 上实现一个儿童数学启蒙首页。背景儿童学习类应用的视觉关键词是明亮、卡通、激励——明亮对应色彩饱满偏暖,卡通对应图标拟物化,激励对应星星、徽章、等级。橙红色 #FB7185 配黄色 #FBBF24 是这类应用的合适主色。本项目首页 5 个模块渐变 Header小朋友昵称 大游戏开始按钮、4 大主题数感 / 加减 / 形状 / 时间、本周得星网格7 天 × 3 关卡、推荐互动课程横滑、家长查看入口隐藏在角落。从产品角度儿童类应用最大的差异点是家长安心 孩子开心——这两个目标看似矛盾但通过鸿蒙的家长管控 用眼时长 内容审核能很好达成。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在儿童教育类应用上的能力栈完整——HealthKit 提供用眼时长统计、HMS Account 提供家庭群组让家长查看孩子进度、PushKit 提供休息提醒、超级终端让内容可投到智慧屏更护眼、AI 助手能力提供个性化讲解、隐私沙盒严格保护儿童数据。Flutter 嵌入 Harmony 6.0 的方案在这种重动画 强交互应用上需要做架构分工——主页用 Flutter 自绘提供 UI动画互动建议用 ArkUI Canvas 原生实现。开发核心代码代码一小朋友 HeaderHeader 必须把小朋友昵称 等级 游戏开始按钮做成视觉中心。我用一个橙黄渐变 Container顶部小朋友头像 昵称 等级 chip中部今天玩什么大字号 启动按钮。Widget_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:[Row(children:[Container(width:48,height:48,decoration:BoxDecoration(shape:BoxShape.circle,color:Colors.white.withValues(alpha:0.4)),alignment:Alignment.center,child:constText(,style:TextStyle(fontSize:26)),),constSizedBox(width:12),constExpanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(小兔兔,style:TextStyle(color:Colors.white,fontSize:16,fontWeight:FontWeight.w800)),SizedBox(height:2),Text(Lv.5 · 已得 286 颗星 ⭐,style:TextStyle(color:Colors.white70,fontSize:11)),],)),Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:4),decoration:BoxDecoration(color:Colors.white24,borderRadius:BorderRadius.circular(20)),child:constRow(children:[Icon(Icons.shield,color:Colors.white,size:14),SizedBox(width:4),Text(家长,style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w700)),]),),]),constSizedBox(height:22),constText(今天玩什么呢,style:TextStyle(color:Colors.white,fontSize:26,fontWeight:FontWeight.w900)),constSizedBox(height:14),Container(width:double.infinity,height:56,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(28),boxShadow:[BoxShadow(color:Colors.black.withValues(alpha:0.18),blurRadius:16,offset:constOffset(0,6))]),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Text( ,style:TextStyle(fontSize:22)),Text(开始游戏,style:TextStyle(color:_primary,fontSize:18,fontWeight:FontWeight.w900)),],)),),]),);}家长查看入口隐藏在 Header 右上角小 chip——孩子误触概率小家长想看时一目了然。鸿蒙的 HMS Account 家庭群组让家长 - 儿童账号关系系统级管理家长查看时无需输密码但孩子无法绕过。从「小朋友 Header」的儿童友好设计与情绪传达角度再补一段。儿童数学类应用的 Header 必须传递「这是给小朋友的、好玩、不焦虑」的氛围。这段 Header 用糖果色粉橙紫的多色渐变作为背景配合卡通形象 「今天学到 X 颗星」 「开始挑战」大按钮的多段式排版让小朋友一眼觉得「这是我的游戏」。「开始挑战」按钮做成纯白色实心 主色文字的胶囊形态大字号、简单语言适合儿童识别。如果未来要扩展支持「多孩子账号」一个家庭多个孩子各自学习可以在 Header 加孩子头像组切换鸿蒙 6.0 的 HMS Account 家庭群组天然支持这种多账号管理。代码二4 大主题4 大主题数感、加减、形状、时间。每个用一个超大 emoji 主题名 已通关数 chip。Widget_themes(){finalitemsconst[[,数感,12,_primary],[➕,加减,8,_amber],[,形状,6,_green],[⏰,时间,4,_purple],];returnGridView.count(crossAxisCount:2,shrinkWrap:true,physics:constNeverScrollableScrollPhysics(),mainAxisSpacing:12,crossAxisSpacing:12,childAspectRatio:1.6,children:items.map((it){finalcit[3]asColor;returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:c.withValues(alpha:0.12),borderRadius:BorderRadius.circular(20)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(it[0]asString,style:constTextStyle(fontSize:36)),constSpacer(),Text(it[1]asString,style:TextStyle(color:c,fontSize:18,fontWeight:FontWeight.w900)),constSizedBox(height:4),Text(已通关${it[2]}关,style:TextStyle(color:c.withValues(alpha:0.7),fontSize:12,fontWeight:FontWeight.w700)),],),);}).toList(),);}每个主题点进去都是一个游戏化的关卡集鸿蒙 6.0 的 NavPathStack 管理这种深度导航。从「4 大主题」的儿童学习路径与游戏化设计角度再补一段。儿童数学的 4 大主题认识数字、加减法、形状、时钟覆盖了学龄前到一年级的核心知识点。每个主题用大色块卡片 卡通图标 主题名 已闯过几关的方式呈现让孩子像选游戏一样选学习内容。每个主题用对应糖果色识别数字粉、加减橙、形状蓝、时钟紫色彩明亮活泼避免深沉色调让孩子感到压力。如果未来要扩展支持「按年级筛选」「按难度排序」可以在主题上方加家长可设置的年龄段 chip。鸿蒙 6.0 的 NavPathStack 让深层导航返回路径清晰孩子点错也能轻松回退。代码三本周得星网格本周每天 3 关游戏的得星情况用 7x3 网格表示——每格 1 至 3 颗星。Widget_starGrid(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(20)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Text(本周收集的⭐,style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),Spacer(),Text(共 38 颗星,style:TextStyle(color:_primary,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:14),Column(children:List.generate(3,(row){returnPadding(padding:constEdgeInsets.only(bottom:6),child:Row(children:List.generate(7,(col){finalstars(rowcol*2)%4;finaldays[一,二,三,四,五,六,日];returnExpanded(child:Container(margin:EdgeInsets.only(right:col6?0:4),height:32,decoration:BoxDecoration(color:stars0?_amber.withValues(alpha:0.22):Colors.black12,borderRadius:BorderRadius.circular(8),),alignment:Alignment.center,child:stars0?Row(mainAxisAlignment:MainAxisAlignment.center,children:List.generate(stars,(s)constPadding(padding:EdgeInsets.symmetric(horizontal:1),child:Text(⭐,style:TextStyle(fontSize:11))))):Text(row0?days[col]:,style:constTextStyle(color:_sub,fontSize:11)),));})),);})),]),);}得星数据通过分布式数据对象同步让家长在自己手机上能实时看到孩子在平板上玩了多少。从「本周得星网格」的儿童成就感与家长反馈设计角度再补一段。儿童数学应用的核心激励机制是「得星」——每完成一关获得星星星星越多孩子越有成就感。这段网格用 7 列展示一周每日得星情况每天用卡通星星 emoji 当日星数的双段式呈现。星数高的日子用金色高亮给孩子「我表现很棒」的视觉反馈。如果某天没玩那一格用浅灰色显示避免直接的「未达成」警示让孩子产生负面情绪。家长在自己手机上同步看到这份网格可以适时给孩子语言鼓励。鸿蒙 6.0 的分布式数据对象让家长 孩子设备数据自动一致是儿童教育类应用的最大体验红利。心得儿童类 App 的视觉灵魂是明亮 安全——明亮的色彩给孩子吸引力护眼提醒和家长管控给家长信任。开发时最容易犯的错是把字体做得不够大、按钮不够大反而让小朋友难以操作。我的策略是按钮 56 高度、字体 18 号、整页留白充足。从能力扩展角度儿童学习应用最值得在鸿蒙端打造的是HealthKit 用眼时长 HMS Account 家庭群组 超级终端投屏护眼三件套。总结本篇实现了 Harmony 6.0 端的儿童数学启蒙首页5 个模块、纯 UI、零依赖、约 380 行代码。第十四组的考研倒计时 / 驾考模拟 / 儿童数学三个迥异的学习类场景共用同一份骨架。从扩展角度建议生产业务里把用眼时长接入 HealthKit把家长视角接入 HMS Account 家庭群组把投屏护眼接入超级终端能力把游戏进度接入分布式数据把今日得星数做成 FormExtensionAbility 桌面卡片。下一篇进入第十五组——笔记思维 / 智慧校园 / 英语听力。