基于HarmonyOS 7.0 跨端开发的游戏化技能树点亮页面实战

前言

游戏化学习类应用借鉴游戏的技能树、等级、经验值机制，把枯燥的学习变成升级打怪般的成就之旅。技能树点亮就是典型：它把学习路径设计成一棵技能树，已掌握的节点点亮、学习中的高亮、未解锁的灰暗，配合等级和经验值激励进步。本文以一个真实的游戏化技能树点亮页面（入口类 SearchPage）为样本，深入剖析它如何在 Flutter × HarmonyOS 7.0 架构下，用等级经验面板、Canvas 自绘的可点击发光技能树与节点详情面板，把"技能树学习进度管理"的游戏化体验完整落地。这是一个把"技能树自绘"与"点击交互"结合得很精彩的页面，通过拆解它，我们能透彻理解 Flutter 的依赖树绘制、坐标命中检测、发光节点、状态三态等游戏化学习应用的实战技巧。

背景

技能树工具的核心是"看等级、点技能、学路径":展示总进度（等级、经验值、已点亮数），用 Canvas 绘制科技树风格的技能树（已掌握绿、学习中黄、未解锁灰，节点带发光），点击节点查看详情（技能说明、状态、经验奖励）。本页面在视觉上采用游戏化学习风格，霓虹绿主色（0xFF00E676）配深色背景（0xFF0D1117），整体是科技感十足的游戏 UI。结构上从上到下依次是：标题栏（带等级、已点亮数）、等级经验面板（等级徽章 + 经验进度条）、Canvas 技能树（带依赖连线的节点树，可点击）、节点详情面板（点击节点后显示）。其中技能树用 CustomPaint 绘制依赖结构 + 发光效果、支持点击命中检测，是游戏化树形可视化的典型示范。

Flutter × Harmony7.0 跨端开发介绍

在 HarmonyOS 7.0 上运行本页面，前提是使用 HarmonyOS 维护的定制版 Flutter SDK，因为鸿蒙对 Flutter 的支持是由 HarmonyOS 跨平台 SIG 通过 fork 扩展 Flutter SDK 实现的。

本页面的技能树是 Flutter 自绘能力的精彩展示：CustomPaint 用 drawLine 画技能依赖连线、drawCircle 画节点、MaskFilter.blur 实现节点发光、TextPainter 标注技能名，这些经 Engine 下沉到 Skia，借助鸿蒙 ArkUI RenderingContext 完成 GPU 光栅化。尤其是发光效果用了模糊滤镜，由 Skia 高效渲染。点击交互通过 GestureDetector 捕获点击坐标、做命中检测。这套自绘 + 交互的逻辑是纯 Dart 的，在鸿蒙上与其它平台行为一致。技能进度数据需本地持久化。

整页渲染流畅，发光技能树的绘制在 AOT 编译后保持高帧率。

开发核心代码

第一部分：基于父子关系的依赖树连线。 技能树根据每个节点的 parent 画依赖连线：

void paint(Canvas canvas, Size size) {
  // 画依赖连线
  for (final n in nodes) {
    final parent = n['parent'] as int;
    if (parent >= 0) {
      final pn = nodes.firstWhere((p) => p['id'] == parent);   // 找到父节点
      final ps = pn['state'] as int, ns = n['state'] as int;
      final ep = Paint()
        ..color = (ps >= 1 && ns >= 1)                          // 父子都已激活：亮连线
            ? _skillPrimary.withValues(alpha: 0.3)
            : const Color(0xFF2A2A4A)                            // 否则暗连线
        ..strokeWidth = (ps >= 1 && ns >= 1) ? 1.5 : 0.5;
      canvas.drawLine(
        Offset((pn['x'] as double) * size.width, (pn['y'] as double) * size.height),
        Offset((n['x'] as double) * size.width, (n['y'] as double) * size.height), ep);
    }
  }
}

每个节点有 parent 字段指向父技能，通过 firstWhere 找到父节点画连线。连线的亮度取决于父子节点是否都已激活——都激活了用亮绿连线、否则用暗灰，体现了"技能依赖路径"的视觉。节点坐标用归一化的 x/y（0~1）乘以画布尺寸，使布局自适应。这种基于父子关系绘制依赖树的方式是科技树、技能树的核心。

第二部分：节点的三态着色与发光。 节点按状态着色，激活的节点带发光效果：

for (final n in nodes) {
  final state = n['state'] as int;
  final color = state == 2 ? _skillPrimary           // 已掌握-绿
      : state == 1 ? const Color(0xFFF59E0B)          // 学习中-黄
      : const Color(0xFF2A2A4A);                       // 未解锁-灰
  final radius = isSelected ? 16.0 : 12.0;            // 选中放大
  // 发光效果（仅激活节点）
  if (state >= 1) {
    canvas.drawCircle(Offset(x, y), radius + 4,
        Paint()..color = color.withValues(alpha: 0.15)
          ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 4));  // 模糊光晕
  }
  canvas.drawCircle(Offset(x, y), radius, Paint()..color = const Color(0xFF161B22));  // 节点底
  canvas.drawCircle(Offset(x, y), radius, Paint()..color = color..style = PaintingStyle.stroke);  // 节点环
}

节点按"已掌握/学习中/未解锁"三态着绿/黄/灰。关键是发光效果——激活的节点（state≥1）用 MaskFilter.blur 画一个模糊的光晕，营造科技树"点亮"的发光感。这种发光让已点亮的技能在深色背景上熠熠生辉，强化了游戏化的成就感。选中的节点半径放大，给出点击反馈。

第三部分：技能树的点击命中检测。 用 GestureDetector 捕获点击坐标，检测命中哪个节点：

GestureDetector(
  onTapUp: (details) {
    final w = context.size?.width ?? 300, h = context.size?.height ?? 320;
    final rx = details.localPosition.dx / w;   // 归一化点击坐标
    final ry = details.localPosition.dy / h;
    for (final n in _nodes) {
      final dx = (rx - (n['x'] as double)).abs();
      final dy = (ry - (n['y'] as double)).abs();
      if (dx < 0.06 && dy < 0.06) {              // 命中阈值内
        setState(() => _selectedNode = n['id'] as int);
        return;
      }
    }
  },
  child: CustomPaint(painter: _SkillTreePainter(nodes: _nodes, selectedNode: _selectedNode)),
)

onTapUp 捕获点击位置，把它归一化（除以画布尺寸）后与每个节点的归一化坐标比较，距离在阈值（0.06）内就判定命中该节点、更新选中状态。这种"自绘图形 + 手动命中检测"是 Canvas 交互的核心——因为 Canvas 画的图形不是独立的可点击 Widget，必须自己根据点击坐标判断点中了哪个图形。命中后更新 _selectedNode，触发详情面板显示和节点放大。

心得

做这个技能树页面，最大的收获是掌握了 Canvas 自绘图形的点击交互——命中检测。前面做的很多自绘都是纯展示的，但技能树需要点击节点查看详情，这就涉及一个关键问题：Canvas 画出来的节点不是独立的 Widget，无法直接响应点击。解决办法是用 GestureDetector 捕获整个画布的点击坐标，然后手动遍历所有节点、计算点击位置离哪个节点最近、在阈值内就判定命中。这套"捕获坐标 + 遍历检测 + 阈值判断"的命中检测逻辑，是让自绘图形可交互的核心技术。掌握了它，自绘的图表、地图、游戏画面就都能响应点击了。这是 CustomPaint 从"只能看"进阶到"能交互"的关键一步，极大拓展了自绘的应用场景。

第二个体会是发光效果对游戏化氛围的塑造。技能树用了 MaskFilter.blur 给已点亮的节点加发光光晕，这个细节让整个技能树在深色背景上有了科技感和成就感——点亮的技能熠熠生辉，未点亮的灰暗沉寂，对比强烈。这种发光效果是游戏 UI 的标志性视觉语言，它让"点亮技能"这个行为有了视觉上的奖励感。从技术上看，发光不过是在节点下层画一个半透明、模糊的大圆，但它营造的氛围远超成本。我体会到，游戏化应用的设计要善用这类视觉特效（发光、粒子、渐变）来营造氛围和奖励感——它们能把普通的"完成"变成有仪式感的"点亮"，激发用户的成就欲。Skia 对模糊滤镜的高效支持，让 Flutter 实现这类特效毫无压力。

第三个深刻的体会是技能树这种"依赖结构"对学习路径的表达。技能树不是简单的列表，而是有依赖关系的树——学"递归"要先掌握"算法入门"、学"Django"要先会"Web 基础"。我用每个节点的 parent 字段表达这种依赖，并通过连线的亮暗反映依赖路径是否打通。这种依赖结构的可视化，把学习路径的"先后顺序、前置条件"清晰地呈现出来，用户一看就知道该按什么顺序学、当前能解锁什么。这让我意识到，技能树这类工具的价值在于把知识的依赖关系显性化——它不只是记录"学了什么"，更是规划"该怎么学"。把抽象的知识依赖用可视化的树结构表达，帮用户理清学习路径，这是游戏化学习应用真正的教育价值所在，远超等级经验这些表层的游戏化元素。

总结

这个游戏化技能树点亮页面完整呈现了 Flutter 在 HarmonyOS 7.0 上构建游戏化学习型页面的标准做法：用 CustomPaint 基于父子关系绘制技能依赖树，用 MaskFilter.blur 实现节点发光营造科技感，用 GestureDetector 坐标命中检测实现节点点击交互。整个页面把"游戏化的学习路径管理"处理得精彩而有成就感——依赖树可视化理清学习路径，发光效果营造点亮的奖励感，命中检测让技能树可交互。这种范式对技能树、学习路径、成就系统等各类需要"依赖结构 + 游戏化激励"的学习类应用都有很强的复用价值。

从跨端落地的角度看，本页面的技能树自绘与交互层是纯 Dart 实现、可零适配复用的：等级面板、技能树的 Canvas 绘制与点击检测、节点详情全部使用 Flutter 内置的绘制 API 与手势组件，不依赖任何平台原生能力，因此切换到 HarmonyOS 提供的定制版 SDK 后即可在鸿蒙设备上直接复用。技能树的依赖连线、发光节点通过 Framework 层下沉到 Engine 层，由 Skia 借助鸿蒙系统渲染上下文完成 GPU 光栅化，其中发光的模糊滤镜由 Skia 高效处理，点击命中检测逻辑纯 Dart、跨端一致。唯一需要针对鸿蒙处理的是技能进度数据的持久化——用户的技能掌握状态需对接鸿蒙的本地存储能力保存。如果进一步把"可交互依赖树"抽象为接收节点树数据的通用组件，就能在技能树、成就系统、关卡地图等多个游戏化场景复用。这正是 Flutter × HarmonyOS 组合在游戏化与可交互可视化领域值得深耕的工程价值所在——连发光特效、点击交互这类游戏 UI 的高级能力，都能在鸿蒙上获得与原生一致的流畅体验。