基于 Harmony 6.0 应用的在线题库刷题系统首页实现前言刷题是中国教育最普遍的学习方式——从小学的奥数题到高考的模拟卷从研究生的考研真题到职场的资格证模拟每一个阶段都需要海量题目的反复练习。一款好的刷题应用要把今天该刷什么 / 我哪里弱 / 我做对了多少 / 距考试还有多久这四件事在一屏内全部铺到。Harmony 6.0 时代刷题类应用迎来了几个独特的能力红利——分布式数据让错题本多端同步、PushKit 让每日刷题任务按时提醒、HMS Cloud 让题库下载到端支持离线刷、AI 助手能力让这道题怎么做成为可对话能力。本文用 Flutter 在 Harmony 6.0 上实现一个题库刷题应用首页。背景刷题类应用的视觉关键词是清晰、专业、激励——清晰对应题目分类必须明确,专业对应准确率 / 排名等数据呈现,激励对应打卡 / 等级 / 排行榜。深蓝色 #1E40AF 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块渐变 Header考试倒计时 大开始按钮、4 大刷题模式章节练习 / 模拟考试 / 错题本 / 真题、知识点雷达图、薄弱知识点列表、好友 PK 排行。从产品角度刷题类应用的最大复购点是考试倒计时——这种还有 X 天的紧迫感是用户每天打开应用的最强动力。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在教育类应用上的能力栈完整——分布式数据让错题本多端同步、PushKit 提供精准提醒、HMS Cloud 提供题库云端存储、AI 助手能力提供解题辅导、超级终端让用户在多设备无缝刷题。Flutter 嵌入 Harmony 6.0 的方案在这种题目展示 数据可视化应用上非常合适。Skia 引擎对深蓝橙色的对比渲染清爽专业。开发核心代码代码一考试倒计时 HeaderHeader 必须把距考试还有 X 天做成视觉中心——这是刷题用户的最强动力。我用一个深蓝渐变 Container顶部考研政治 · 一战上岸目标中部距考试 218 天大字号倒计时。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(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.school,color:Colors.white,size:22),SizedBox(width:8),Text(考研政治,style:TextStyle(color:Colors.white,fontSize:16,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.flag,color:_accent,size:22),]),constSizedBox(height:14),constText(距考试还有,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(218,style:TextStyle(color:Colors.white,fontSize:56,fontWeight:FontWeight.w900)),SizedBox(width:8),Padding(padding:EdgeInsets.only(bottom:12),child:Text(天,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w700))),]),constSizedBox(height:12),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:_accent,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.play_arrow,color:Colors.white,size:24),SizedBox(width:6),Text(继续昨日刷题剩 32 题,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w800)),],)),),],),);}倒计时数据是这类 App 最值得做成桌面服务卡片的元素——用户每次解锁手机都能看到还有 218 天激励强度比 App 内提醒高得多。从「考试倒计时 Header」的紧迫感与目标驱动设计角度再补一段。考试类应用的 Header 必须把「距考试还有多久」做成视觉中心——这是用户最敏感的核心数据。这段 Header 用红色到深红的渐变背景红色传递「紧迫、关键」的视觉冲击配合「距考研还有 X 天」大字号 「累计刷题 X 题」副信息的多段式排版让用户每天打开应用都被「时间不多了」激励。如果距考试小于 30 天可以让背景变为更深的红色甚至闪烁。鸿蒙 6.0 的 FormExtensionAbility 让倒计时桌面卡片可以每天自动更新用户解锁手机就能看到。代码二4 大刷题模式刷题模式用 4 等分网格——章节练习、模拟考试、错题本、真题。每项独立色相图标 数量 chip。Widget_modes(){finalitemsconst[[Icons.list,章节练习,已刷 1,286,_primary],[Icons.assignment,模拟考试,32 套可做,_amber],[Icons.error_outline,错题本,218 道,_accent],[Icons.history_edu,历年真题,12 年,_green],];returnGridView.count(crossAxisCount:2,shrinkWrap:true,physics:constNeverScrollableScrollPhysics(),mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:2.4,children:items.map((it){finalcit[3]asColor;returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Row(children:[Container(width:44,height:44,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(12)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(width:12),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:4),Text(it[2]asString,style:constTextStyle(color:_sub,fontSize:11)),],)),]),);}).toList(),);}错题本数据通过分布式数据对象多端同步——用户在手机上刷错的题在平板和智慧屏上立刻能看到这种端到端的学习连续性是 Harmony 6.0 端独有的体验。从「4 大刷题模式」的考试备战路径设计角度再补一段。考试类应用的 4 大刷题模式章节练习、模拟考试、错题本、AI 智能推荐覆盖了完整的备考路径——按章节巩固基础、按整卷训练应试、按错题查漏补缺、按 AI 推荐针对性提升。每个模式用独立色相做识别章节蓝、模拟橙、错题红、AI 紫每个入口的「X 题待刷」副数字让用户感知到「我还有多少要刷」。如果未来要扩展支持「按知识点筛选」「按难度筛选」可以在 4 等分下方加 chip 切换栏。鸿蒙 6.0 的 NeuralNetworkRuntime 让 AI 推荐题目在端侧推理完成避免敏感答题数据上传云端。代码三薄弱知识点列表每条知识点需要包含——知识点名、错题数、正确率、推荐刷题数。我用 Container 包裹正确率用进度条可视化红黄绿三色表示掌握程度。Widget_weakItem(MapString,dynamicw){finalratew[rate]asdouble;finalcolorrate0.5?_red:rate0.75?_amber:_green;returnContainer(margin:constEdgeInsets.only(bottom:10),padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(14)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Text(w[name]asString,style:constTextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w700)),constSpacer(),Text(${(rate*100).toInt()}% 正确率,style:TextStyle(color:color,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:8),ClipRRect(borderRadius:BorderRadius.circular(3),child:LinearProgressIndicator(value:rate,minHeight:6,backgroundColor:Colors.black12,valueColor:AlwaysStoppedAnimation(color),),),constSizedBox(height:8),Row(children:[Text(错题 ${w[wrong]} 道 · 共 ${w[total]} 题,style:constTextStyle(color:_sub,fontSize:11)),constSpacer(),Container(padding:constEdgeInsets.symmetric(horizontal:10,vertical:4),decoration:BoxDecoration(color:_primary.withValues(alpha:0.14),borderRadius:BorderRadius.circular(20)),child:constText(强化训练,style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w700)),),]),],),);}正确率数据通过端侧持续累计 分布式数据对象同步得到。AI 助手能力可以基于薄弱知识点自动推荐针对性练习题让刷题路径个性化。从「薄弱知识点列表」的精准提分与 AI 个性化设计角度再补一段。考试备考的核心策略是「先补短板」——花同样的时间补 60% 正确率的章节比补 90% 正确率的章节提分更多。这段列表把所有章节按正确率从低到高排序让用户优先补最薄弱的部分。每条记录用「章节名 正确率 已练题数 立即练习」四段信息塞在卡片里正确率用进度条 红/黄/绿三色编码让用户一眼识别需要重点突破的章节。如果未来要扩展支持「智能推荐时长」AI 估算补这个章节需要多久可以在每条卡片右侧加预计时长 chip鸿蒙 6.0 的 NeuralNetworkRuntime 让端侧 AI 估算精度极高。心得刷题类 App 的视觉灵魂是清晰 紧迫——深蓝色给专业倒计时大字号给紧迫。开发时最容易犯的错是把数据可视化做得过于花哨反而让用户难以一眼看出重点。我的策略是用倒计时做 Header 视觉中心4 大模式做主入口知识点列表做次级内容。从能力扩展角度刷题应用最值得在鸿蒙端打造的是分布式错题本 AI 解题辅导 PushKit 每日推送三件套——错题本多端同步、AI 答疑随叫随到、推送让每日学习不间断。总结本篇实现了 Harmony 6.0 端的题库刷题首页5 个模块、纯 UI、零依赖、约 360 行代码。骨架可直接迁移到驾考、教师资格证、注册会计师等多种垂直题库场景。从扩展角度建议生产业务里把错题本接入分布式数据对象把每日推送接入 PushKit把考试倒计时做成 FormExtensionAbility 桌面卡片把解题辅导接入 AI 助手把题库下载接入 HMS Cloud。下一篇是第十二组的最后一块——课堂签到管理应用。