基于 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 引擎对深色 + 紫青色高亮的渲染极其通透。

开发核心代码

代码一：学习路径 Header

Header 必须把"当前学习路径 + 进度 + 下一节按钮"做成视觉中心。我用一个深紫色 Container，顶部"Python 入门 · 第 12 节"，中部进度条，底部下一节按钮。

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, _accent],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(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)),
            ]),
          ),
        ]),
        const SizedBox(height: 16),
        const Text('Python 入门',
            style: TextStyle(color: Colors.white,
                fontSize: 22, fontWeight: FontWeight.w900)),
        const SizedBox(height: 4),
        const Text('第 12 / 36 节 · 列表与字典',
            style: TextStyle(color: Colors.white70, fontSize: 12)),
        const SizedBox(height: 14),
        ClipRRect(borderRadius: BorderRadius.circular(3),
          child: const LinearProgressIndicator(
            value: 0.33, minHeight: 6,
            backgroundColor: Colors.white24,
            valueColor: AlwaysStoppedAnimation(Colors.white),
          ),
        ),
        const SizedBox(height: 14),
        Container(width: double.infinity, height: 50,
          decoration: BoxDecoration(color: Colors.white,
              borderRadius: BorderRadius.circular(25)),
          child: const Center(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() {
  final items = const [
    [Icons.menu_book, '课程', _primary],
    [Icons.code, '题库', _accent],
    [Icons.folder_special, '项目', _amber],
    [Icons.forum, '社区', _green],
  ];
  return Container(padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Row(children: items.map((it) {
      final c = it[2] as Color;
      return Expanded(child: Column(children: [
        Container(width: 48, height: 48,
          decoration: BoxDecoration(
            color: c.withValues(alpha: 0.16),
            borderRadius: BorderRadius.circular(14)),
          child: Icon(it[0] as IconData, color: c, size: 22),
        ),
        const SizedBox(height: 8),
        Text(it[1] as String, style: const TextStyle(
            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() {
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Text('代码贡献',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w700)),
        Spacer(),
        Text('过去 12 周 · 共 286 次提交',
            style: TextStyle(color: _accent, fontSize: 12,
                fontWeight: FontWeight.w700)),
      ]),
      const SizedBox(height: 14),
      Column(children: List.generate(5, (row) {
        return Padding(padding: const EdgeInsets.only(bottom: 4),
          child: Row(children: List.generate(12, (col) {
            final intensity = (row + col) % 5;
            final c = intensity == 0 ? const Color(0xFFEEF2FF)
                : _accent.withValues(alpha: 0.2 + intensity * 0.18);
            return Expanded(child: Container(
              margin: EdgeInsets.only(right: col == 11 ? 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 汉字学习应用。