HarmonyOS APP＜玩转React＞开源教程二十六：源码学习模块

本文讲解项目里的源码学习功能，对应核心文件是和，数据来自。这一部分不只是列标题，而是把知识分类、章节概览、详情内容、源码片段和参考资料串成了一套完整的阅读体验。

大雷神

182人浏览 · 2026-03-31 09:15:00

大雷神 · 2026-03-31 09:15:00 发布

第26次：源码学习模块

本文讲解项目里的源码学习功能，对应核心文件是 SourceCodePage.ets 和 SourceCodeDetailPage.ets，数据来自 SourceCodeData.ets、SourceCodeDetailData.ets。这一部分不只是列标题，而是把知识分类、章节概览、详情内容、源码片段和参考资料串成了一套完整的阅读体验。

先看整体结构

源码学习模块分成两层：

概览层：SourceCodePage
详情层：SourceCodeDetailPage

概览层负责分类和章节列表，详情层负责深度阅读和代码复制。

一、为什么源码学习要拆成“概览页 + 详情页”

源码学习内容通常有一个特点：信息密度高。如果一进页面就把所有细节铺满，用户会很容易被淹没。当前项目采用两层结构是非常合理的：

概览页：帮助用户快速浏览、筛选和决定读哪一章
详情页：进入后再深入看完整内容、源码和参考链接

这和课程列表 / 模块详情 / 课时详情的思路很像，本质上仍然是“摘要层 + 深读层”的设计模式。

二、概览页 `SourceCodePage` 的设计重点是什么

概览页的核心元素有三个：

顶部标题栏
分类横向标签
章节可展开列表

分类标签

使用横向滚动的标签条，让用户在不同源码主题之间切换。每个标签既有图标，也有名称，这样比纯文字更容易识别。

分类切换本身并不复杂，但这段真实代码很值得跟着读一遍，因为它把“切换标签”和“重置列表展开状态”连在了一起：

ForEach(this.categories, (cat: SourceCodeCategory) => {
  Column() {
    Text(cat.icon).fontSize(20)
    Text(cat.name).fontSize(11)
      .fontColor(this.selectedCategory === cat.id ?
        '#ffffff' : (this.isDarkMode ? '#e0e6eb' : '#495057'))
      .margin({ top: 4 })
  }
  .padding({ left: 12, right: 12, top: 8, bottom: 8 })
  .backgroundColor(this.selectedCategory === cat.id ?
    (this.isDarkMode ? '#61DAFB' : '#0077b6') :
    (this.isDarkMode ? '#282c34' : '#ffffff'))
  .borderRadius(12)
  .onClick(() => {
    this.selectedCategory = cat.id;
    this.chapters = SourceCodeData.getChaptersByCategory(cat.id);
    this.expandedChapter = '';
  })
})

章节列表

每章都展示：

难度徽章
章节序号
标题
描述

点击后还能展开，直接预览章节内容、代码示例和关键要点。这个“先展开，再决定要不要看详情”的体验很适合学习型阅读。

三、详情页为什么信息层次这么多

进入 SourceCodeDetailPage 后，页面会按顺序展示：

章节基本信息卡片
详细小节列表
源码区
参考资料区

这实际上对应的是一个非常完整的学习节奏：

我先知道这一章讲什么
我再按小节系统阅读
然后看源码原文
最后顺着参考资料继续延展

这样的结构说明当前项目不是简单“放一份源码文本”，而是想把源码阅读做成一种有引导的学习过程。

详情页拿数据的入口也很清楚，先读参数，再查章节，再查详情：

aboutToAppear(): void {
  const params = router.getParams() as RouterParams;
  if (params?.chapterId) {
    this.chapter = SourceCodeData.getChapterById(params.chapterId) || null;
    this.detail = SourceCodeDetailData.getDetail(params.chapterId) || null;
  }
  this.isLoading = false;
}

四、源码区为什么同时支持滚动和复制

源码文本通常很长，所以详情页在源码区里做了两件很必要的事：

横向/局部滚动
一键复制

这两个功能非常实用：

滚动保证长代码不会把布局撑坏
复制保证用户可以把代码带出去分析、对比或实验

copyToClipboard() 这里复用了系统剪贴板和 Toast 提示，这和前面 CodeBlock 组件的设计思路是一致的。也就是说，项目在“代码可带走”这件事上是有统一意识的。

在 SourceCodeDetailPage.ets 里，复制逻辑就是下面这样接到系统能力上的：

private copyToClipboard(text: string): void {
  const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
  const systemPasteboard = pasteboard.getSystemPasteboard();
  systemPasteboard.setData(pasteboardData, (err) => {
    if (err) {
      promptAction.showToast({ message: '复制失败', duration: 1500 });
    } else {
      promptAction.showToast({ message: '已复制到剪贴板', duration: 1500 });
    }
  });
}