基于 Harmony 6.0 应用的编程学习平台首页实现前言编程学习是 21 世纪最被需要的技能之一——从 K12 的 Scratch 到大学的 Python从职场的 Java 到副业的前端几乎每个人都要在某个阶段学会写一段能跑的代码。一款好的编程学习平台要把今天学什么 / 我学到哪了 / 题目怎么做 / 我能不能秀一下四件事在一屏内全部铺到。Harmony 6.0 时代编程学习应用迎来了几个独特的能力红利——AI 助手能力让代码自动批改成为可能、分布式数据让代码作业多端同步、超级终端让用户在大屏幕智慧屏上写代码、HMS Cloud 让代码作业云端备份。本文用 Flutter 在 Harmony 6.0 上实现一个编程学习首页。背景编程学习类应用的视觉关键词是科技、年轻、激励——科技对应深色优先 高饱和高亮,年轻对应图标活泼,激励对应等级 / 徽章 / 积分。深紫蓝 #312E81 配荧光紫 #A855F7 是这类应用的合适主色。本项目首页 5 个模块渐变 Header当前学习路径 下一节按钮、4 大入口课程 / 题库 / 项目 / 社区、本周代码贡献热力图GitHub 风格、推荐课程横滑、热门项目展示。从产品角度编程学习类最大的复购点是持续学习激励——徽章、等级、贡献热力图、好友 PK。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在编程学习类应用上的能力栈完整——AI 助手能力提供代码批改和讲解、分布式数据让代码作业多端同步、HMS Cloud 提供代码备份、超级终端让代码可在智慧屏大屏练习。Flutter 嵌入 Harmony 6.0 的方案在这种代码编辑 数据可视化应用上需要做架构分工——主页用 Flutter 自绘提供 UI代码编辑器建议用 ArkTS 端原生 TextInput 实现性能更好。Skia 引擎对深色 紫青色高亮的渲染极其通透。开发核心代码代码一学习路径 HeaderHeader 必须把当前学习路径 进度 下一节按钮做成视觉中心。我用一个深紫色 Container顶部Python 入门 · 第 12 节中部进度条底部下一节按钮。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.code,color:Colors.white,size:22),SizedBox(width:8),Text(CodeLab,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Color(0xFFA855F7),borderRadius:BorderRadius.all(Radius.circular(6))),child:Row(children:[Icon(Icons.star,color:Colors.white,size:14),SizedBox(width:4),Text(Lv.8,style:TextStyle(color:Colors.white,fontSize:12,fontWeight:FontWeight.w800)),]),),]),constSizedBox(height:16),constText(Python 入门,style:TextStyle(color:Colors.white,fontSize:22,fontWeight:FontWeight.w900)),constSizedBox(height:4),constText(第 12 / 36 节 · 列表与字典,style:TextStyle(color:Colors.white70,fontSize:12)),constSizedBox(height:14),ClipRRect(borderRadius:BorderRadius.circular(3),child:constLinearProgressIndicator(value:0.33,minHeight:6,backgroundColor:Colors.white24,valueColor:AlwaysStoppedAnimation(Colors.white),),),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)),],)),),],),);}学习进度通过分布式数据对象同步——用户在手机上学到第 12 节平板上立刻可见。从「学习路径 Header」的进度可视化与目标驱动设计角度再补一段。编程学习类应用的 Header 必须传递「我正在哪条路径上 还有多远」的整体感。这段 Header 用主蓝色到深紫色的渐变背景科技感配合「Python 入门 · 第 12 / 30 节」 进度条 「继续学习」大按钮的多段式排版让用户每次打开应用都能立刻接续上次的学习。如果未来要扩展支持「多路径并行」用户同时学 Python 和 JavaScript可以在 Header 顶部加 Tab 切换不同路径骨架不变。代码二4 大入口编程学习的 4 大入口课程、题库、项目、社区。Widget_entries(){finalitemsconst[[Icons.menu_book,课程,_primary],[Icons.code,题库,_accent],[Icons.folder_special,项目,_amber],[Icons.forum,社区,_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:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.16),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)),]));}).toList()),);}4 大入口章节学习、刷题练习、AI 助教、社区问答覆盖了编程学习的全部场景——学知识、做练习、问问题、找伙伴。每个入口用独立色相做识别章节蓝、刷题橙、AI 紫、社区绿让用户视觉快速分类。从「4 大入口」的学习闭环与功能矩阵设计角度再补一段。编程学习是「学 → 练 → 问 → 讨论」的连续闭环——只有这四件事都做完才算真正掌握一个知识点。这段 4 等分布局把这个闭环的入口一次性铺到首页让用户的视线从「章节学新东西→ 刷题练手→ AI 助教卡住时问→ 社区深入讨论」一气呵成。“AI 助教” 作为编程学习类应用最有差异化的功能建议接入鸿蒙 6.0 的 AI 助手能力让端侧大模型给出代码解析。如果未来要扩展支持「同伴匹配」找同水平学习伙伴一起学可以在 4 等分扩展到 2x4 网格。代码三贡献热力图GitHub 风格的贡献热力图——5 行 × 12 周的小色块网格颜色深浅表示当天提交数量。Widget_heatmap(){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(过去 12 周 · 共 286 次提交,style:TextStyle(color:_accent,fontSize:12,fontWeight:FontWeight.w700)),]),constSizedBox(height:14),Column(children:List.generate(5,(row){returnPadding(padding:constEdgeInsets.only(bottom:4),child:Row(children:List.generate(12,(col){finalintensity(rowcol)%5;finalcintensity0?constColor(0xFFEEF2FF):_accent.withValues(alpha:0.2intensity*0.18);returnExpanded(child:Container(margin:EdgeInsets.only(right:col11?0:4),height:16,decoration:BoxDecoration(color:c,borderRadius:BorderRadius.circular(3)),));})),);})),]),);}贡献数据通过分布式数据对象多端汇总。AI 助手能力可以基于贡献模式给出建议——“你已经连续 7 天没刷题要不要恢复一下”。从「贡献热力图」的可视化激励与开发者文化共鸣设计角度再补一段。GitHub 风格的贡献热力图是开发者圈最有共鸣的视觉符号——每个写代码的人都希望自己的格子绿油油。这段热力图用 5 行 × 12 周的小色块网格表达 60 天的学习节奏颜色从浅灰无活动到深绿密集活动的 5 档渐变。每个小色块边长 12 像素间距 2 像素配合鸿蒙 6.0 的 Skia 渲染极其顺滑——即使 60 个色块同屏也不会卡顿。如果未来要扩展支持「按月查看」「按知识点分类」可以在热力图顶部加 chip 切换栏骨架不变。这种热力图骨架可以无缝迁移到运动打卡、阅读打卡、写作打卡等所有「日常坚持」类场景。心得编程学习类 App 的视觉灵魂是科技 激励——深紫色给科技感等级徽章给激励。开发时最容易犯的错是把代码示例做得太占空间反而稀释了学习激励。我的策略是把进度条和等级 chip 放在 Header 显著位置。从能力扩展角度编程学习类应用最值得在鸿蒙端打造的是AI 代码批改 分布式作业 超级终端大屏练习三件套。总结本篇实现了 Harmony 6.0 端的编程学习首页5 个模块、纯 UI、零依赖、约 320 行代码。骨架可直接迁移到数学训练、英语学习等多种学习类应用。从扩展角度建议生产业务里把代码批改接入 AI 助手把作业接入分布式数据把学习时长做成 FormExtensionAbility 桌面卡片把代码备份接入 HMS Cloud。下一篇是第十三组的第二块——AR 汉字学习应用。