基于 Harmony 6.0 应用的英语单词记忆应用首页实现前言背单词是英语学习里最枯燥但又绕不过去的一环——每天 30 个新词、每天复习 80 个旧词一年下来能积累 4000 至 5000 个核心词汇。传统的纸质单词书已经被各种背单词 App 取代因为应用能精确控制今天该背哪些词、什么时候该复习、用户哪些词容易错。这种应用的首页要回答四件事——“今天该背多少 / 我已经掌握多少 / 我连续打卡多少天 / 现在能开始背了吗”。Harmony 6.0 时代背单词应用迎来了几个独特的能力红利——AudioKit 提供高质量发音播放、HMS Push 让该复习了按时提醒、桌面服务卡片让今日新词数在桌面常驻、AI 助手能力让自然对话练习成为可能。本文用 Flutter 在 Harmony 6.0 上实现一个英语单词记忆应用首页。背景学习类应用的视觉关键词是专注、清晰、激励——专注对应色彩克制不分散注意,清晰对应今日任务必须显著,激励对应打卡 / 等级 / 成就感数据强调。深蓝色 #1E40AF 配橙色 #F97316 是这类应用的合适主色——既有学习专注又有成就激励。本项目首页 5 个模块渐变 Header连续打卡 大开始按钮、今日任务 4 等分新词 / 复习 / 听写 / 测验、艾宾浩斯曲线进度卡、本周学习时长柱状图、词汇等级展示。从产品角度背单词类应用最大的复购点是日复一日的打卡——用户必须被精确的今天还差 12 个就完成了激励。鸿蒙的桌面服务卡片让这种激励渗透到日常使用场景每次解锁手机都能看到今日 18/30 完成。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在学习类应用上的能力栈完整——AudioKit 提供单词发音播放、PushKit 提供按艾宾浩斯曲线的精准提醒、AI 助手能力提供对话练习、超级终端让用户在多设备间无缝切换学习、分布式数据让学习进度多端同步。Flutter 嵌入 Harmony 6.0 的方案在这种轻交互 长沉淀应用上非常合适。Skia 引擎对深蓝橙色#1E40AF / #F97316的对比渲染非常清爽配合圆角白色卡片整页氛围既专业又激励。开发核心代码代码一连续打卡 HeaderHeader 必须把连续打卡天数 今日开始按钮做成视觉中心。我用一个深蓝渐变 Container顶部已连续 38 天成就 chip中部今日新词数大字号底部开始今天的学习按钮。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF1E3A8A)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(children:[constRow(children:[Icon(Icons.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),child:Row(children:[Icon(Icons.local_fire_department,color:_accent,size:16),SizedBox(width:4),Text(38 天,style:TextStyle(color:Colors.white,fontSize:13,fontWeight:FontWeight.w800)),]),),]),constSizedBox(height:18),constText(今日任务,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:6),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(30,style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),SizedBox(width:6),Padding(padding:EdgeInsets.only(bottom:10),child:Text(个新词 80 个复习,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),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:24),SizedBox(width:6),Text(开始今天的学习,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}连续打卡天数在生产业务里来自分布式数据对象的累计统计多端同步——用户在手机上学习的天数平板和智慧屏立刻可见。从「连续打卡 Header」的学习激励与游戏化设计角度再补一段。单词记忆类应用的 Header 必须传递「不要断卡」的心理压力。这段 Header 用主蓝色到深蓝的渐变背景配合「已连续打卡 X 天」大字号 火焰 emoji 「今天完成 X / Y 词」进度条的多段式排版让用户感受到「我已经坚持这么久不能放弃」的承诺感。火焰 emoji 是连续打卡的国际通用符号Snapchat、多邻国都在用用户一眼就能识别。如果未来要支持「断卡补救机制」用积分换补卡可以在 Header 加一个「补卡」按钮骨架不变。鸿蒙 6.0 的 PushKit 让每天 21:00「您今天还没打卡」的温和提醒精准到达。代码二今日任务 4 等分今日任务用 4 等分网格——新词、复习、听写、测验。每项一个图标 任务量 chip。Widget_tasks(){finalitemsconst[[Icons.add_box,新词,30,_primary],[Icons.refresh,复习,80,_amber],[Icons.headphones,听写,20,_green],[Icons.quiz,测验,15,_accent],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[3]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),constSizedBox(height:2),Text(it[2]asString,style:TextStyle(color:c,fontSize:14,fontWeight:FontWeight.w800)),]));}).toList()),);}听写功能在生产业务里通过 AudioKit 播放单词发音再由用户拼写鸿蒙 6.0 的 AudioKit 提供高质量 TTS 能力配合内置发音库可以做到接近母语者的发音水准。从「今日任务 4 等分」的学习闭环与功能矩阵设计角度再补一段。单词记忆的 4 大任务新词、复习、听写、长难句覆盖了完整的学习闭环——学新词、巩固旧词、检验掌握、应用拓展。每个入口用「数量 任务名 主题色图标」三件套呈现让用户一眼看到「我今天还有多少要做」。每个任务用独立色相区分新词蓝、复习橙、听写绿、长难句紫。如果未来要扩展支持「按词书切换」雅思 / 托福 / GRE可以在 4 等分上方加 chip 切换栏鸿蒙 6.0 的分布式数据对象让多设备的词书进度自动同步。代码三艾宾浩斯曲线进度卡记忆曲线进度用一条波动的折线模拟配合时间点标记。这是背单词类应用区别于普通学习应用的关键功能。Widget_curve(){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(详情,style:TextStyle(color:_primary,fontSize:12)),]),constSizedBox(height:10),constText(您还有 3 组单词需要立即复习,style:TextStyle(color:_accent,fontSize:12)),constSizedBox(height:14),Row(children:List.generate(7,(i){finalvalues[80,65,50,60,75,85,90];finalhvalues[i]/100*80;finaltimes[1h,1d,3d,7d,15d,30d,今];returnExpanded(child:Column(children:[Container(width:12,height:h,decoration:BoxDecoration(color:_primary.withValues(alpha:0.4i*0.08),borderRadius:BorderRadius.circular(3)),),constSizedBox(height:6),Text(times[i],style:constTextStyle(color:_sub,fontSize:10)),]));})),]),);}艾宾浩斯曲线的复习时机在生产业务里通过 PushKit 自动调度——每个新词在 1 小时、1 天、3 天、7 天、15 天、30 天后分别提醒一次鸿蒙的精准提醒能力是这个核心功能的基础。从「艾宾浩斯曲线进度卡」的科学记忆方法可视化设计角度再补一段。艾宾浩斯遗忘曲线是德国心理学家提出的科学记忆方法——每个词必须在特定时间点复习才能形成长期记忆。这段卡片用 6 个时间节点1h / 1d / 3d / 7d / 15d / 30d 每个节点已完成 / 待完成的词数让用户一眼看到自己的记忆曲线进度。已完成的节点用主色实心圆 勾待完成的用浅色空心圆让用户清楚「下一步要复习什么」。如果未来要支持「按词书细化」每个词书独立的曲线可以在卡片顶部加 chip 切换栏。鸿蒙 6.0 的 PushKit 系统级保活让每个词的 6 次复习提醒精准触达是艾宾浩斯曲线落地的关键。心得背单词类 App 的视觉灵魂是专注 激励——深蓝色给专注橙色 chip 给激励。开发时最容易犯的错是把首页做得花里胡哨反而让用户产生我是来玩的的错觉。我的策略是用大字号的今日 30 个新词做视觉中心让用户进 App 第一眼就感受到任务量。从能力扩展角度背单词应用最值得在鸿蒙端打造的是PushKit 艾宾浩斯精准推送 AudioKit TTS 发音 AI 助手对话练习三件套——精准推送让记忆曲线落地、TTS 让发音学习不依赖云端、AI 对话让单词在场景中得以使用。总结本篇实现了 Harmony 6.0 端的英语单词记忆首页5 个模块、纯 UI、零依赖、约 320 行代码。骨架可直接迁移到诗词背诵、法律条文记忆、医学单词等多种长期记忆类场景。从扩展角度建议生产业务里把发音播放接入 AudioKit把记忆曲线提醒接入 PushKit把今日打卡做成 FormExtensionAbility 桌面卡片把对话练习接入 AI 助手把学习进度接入分布式数据多端同步。下一篇是第十二组的第二块——在线题库刷题系统。