鸿蒙原生应用实战：考试资料库资料页的课程胶囊与章节列表

App 37「校园考试资料库」资料（Func1Tab），主题色 #EB5757 考试红。资料页采用"Header + 课程胶囊 + 章节列表"三区布局——白色 Header（"资料浏览"标题） + CourseTab 课程胶囊（高等数学/大学英语/数据结构/大学物理 4 个胶囊，@State activeCourse 单选，选中红底白字，横向滚动） + 5 章节目录（📑 第一章 函数与极限 12 份资料 / 第二章 导数与微分 18 份 / 第三章 积分学 24 份 / 第四章 微分方程 15 份 / 历年真题汇总 36 份，每条含 24 号 📑 emoji + 章节名 + 资料份数 + > 箭头）。本篇基于 37-exam-bank/entry/src/main/ets/pages/Func1Tab.ets（约 85 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 课程 + 章节"布局

App 37 资料页是"标题 + 课程分类 + 章节内容"的学习资料浏览页——4 个 @Builder 块：

build() {
  Column() {
    this.Header()
    this.CourseTab()
    Scroll() {
      Column({ space: 12 }) {
        this.ChapterList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

3 块结构：

1. Header — 白色背景 + "资料浏览"标题
2. CourseTab — 4 课程胶囊（横滑单选）
3. ChapterList — 5 章节目录

与 App 34 资料页对比：App 34 是"左侧课程栏 + 右侧文档"分栏、App 37 是"顶部课程胶囊 + 章节列表"——"34 左右分栏 vs 37 上下结构"——"34 纵向导航、37 横向胶囊"——"两种资料浏览"——"37 上下更简洁"——"资料页的多样"。

与 App 37 首页对比——首页是"课程 Grid + 热门试卷"、资料页是"课程胶囊 + 章节"——"首页选卷、资料看章节"——"首页内容推荐、资料章节导航"——"两种浏览维度"——"从试卷到章节"——"备考的深入"。

主题色 #EB5757 考试红——同首页——"品牌色贯穿全 App"。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：白色 + "资料浏览"

Header 是 **白色 + "资料浏览"**的极简标题头：

@Builder
Header() {
  Row() { Text('资料浏览').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) }
  .width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad })
  .backgroundColor(C.card).alignItems(VerticalAlign.Bottom)
}

Header 结构：白色背景 + 20 号加粗黑色"资料浏览" + 56 高 + safeTop + 底部对齐——"同系列标准 Header"。

"资料浏览" 的命名——"资料 + 浏览"——"浏览 = 查看"——"资料浏览 = 章节导航"——"浏览动作"——"资料页标题"。

height(this.safeTop + 56) 固定高度——"56 + safeTop = 标准 Header 高"——"系列统一"。

alignItems(VerticalAlign.Bottom) 底部对齐——"避开状态栏"——"标准适配"。

三、CourseTab：4 课程胶囊（本页核心）

CourseTab 是 4 门课程横滑单选胶囊：

@Builder
CourseTab() {
  Scroll() {
    Row({ space: 10 }) {
      ForEach(this.courses, (c: string, idx: number) => {
        Text(c).fontSize(13)
          .fontColor(this.activeCourse === idx ? '#FFFFFF' : C.textSub)
          .padding({ left: 16, right: 16, top: 8, bottom: 8 })
          .backgroundColor(this.activeCourse === idx ? C.primary : C.card).borderRadius(18)
          .onClick(() => { this.activeCourse = idx; })
      }, (c: string) => c)
    }
  }
  .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')
  .padding({ left: D.pad, right: D.pad, top: 10, bottom: 4 })
}

CourseTab 结构：横向 Scroll + Row（10 间距）+ 4 个胶囊 Text——"横滑课程胶囊"。

4 门课程：高等数学/大学英语/数据结构/大学物理——"4 个课程"——"同首页课程"——"跨页一致"——"课程体系统一"。

@State activeCourse: number = 0 选中状态——"当前课程"——"默认高数"——"单选"——"@State 状态管理"。

fontColor(this.activeCourse === idx ? '#FFFFFF' : C.textSub) 选中白字——"选中白、未选灰"——"颜色 = 选中"。

backgroundColor(this.activeCourse === idx ? C.primary : C.card) 选中红底——"选中考试红、未选白底"——"主题色 = 选中"——"红白对比"。

borderRadius(18) 18 圆角胶囊——"胶囊形"——"柔和"——"同系列胶囊"。

padding({ left: 16, right: 16, top: 8, bottom: 8 }) 16 横向 + 8 纵向——"胶囊内边距"——"舒适"。

onClick(() => { this.activeCourse = idx; }) 点击切换——"点击换课程"——"状态驱动"——"单选切换"。

scrollable(ScrollDirection.Horizontal) 横向滚动——"横滑"——"4 胶囊横排"——"可滚动"——"scrollBar Off"。

与 App 36 成色胶囊对比——App 36 是"Flex 换行"、App 37 是"横滑"——"换行 vs 横滑"——"两种胶囊布局"——"37 横滑一行"——"课程胶囊的多样"。

与 App 31 ChipRow 对比——App 31 是"分类 Chip"、App 37 是"课程胶囊"——"两种横滑胶囊"——"31 分类、37 课程"——"横滑胶囊范式"。

四、ChapterList：5 章节目录

ChapterList 是 5 个章节的列表：

@Builder
ChapterList() {
  Column({ space: 12 }) {
    ForEach(this.chapters, (ch: Chapter) => {
      Row({ space: 12 }) {
        Text('📑').fontSize(24)
        Column({ space: 4 }) {
          Text(ch.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text)
          Text(ch.count + ' 份资料').fontSize(12).fontColor(C.textDim)
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('>').fontSize(16).fontColor(C.textDim)
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: ch.title }); })
    }, (ch: Chapter) => ch.id.toString())
  }.width('100%')
}

每个章节卡的结构：

• 左 📑 24 号 emoji
• 中 文字区（章节名 14 号 + "12 份资料" 12 号灰）
• 右 > 16 号箭头

5 个章节（每章 3 要素）：

📑	章节	资料份数
📑	第一章 函数与极限	12 份
📑	第二章 导数与微分	18 份
📑	第三章 积分学	24 份
📑	第四章 微分方程	15 份
📑	历年真题汇总	36 份

Text('📑') 24 号资料 emoji——"📑 = 资料/文件"——"章节图标"——"统一 emoji"——"资料的视觉"。

Text(ch.title) 14 号章节名——"第一章 函数与极限"——"章节标题"——"教材章节结构"——"高数章节"——"真实教材目录"。

Text(ch.count + ' 份资料') 12 号灰资料数——"12 份资料"——"章节资料量"——"内容数量"——"份数 = 内容丰富度"。

Text('>') 16 号箭头——"跳转箭头"——"进入章节"——"通用符号"。

onClick(() => promptAction.showToast({ message: ch.title })) 点击章节——"Toast 反馈"——"占位跳转"——"真实产品进章节资料"。

padding(14).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 14 padding + 14 圆角 + 1px 边框——"章节卡标准"。

章节结构的合理性——"函数极限 → 导数微分 → 积分 → 微分方程 → 真题"——"高数标准教材"——"5 章覆盖"——"教材结构"——"历年真题汇总 = 备考核心"。

资料份数的梯度——"12/18/24/15/36"——"章节资料量"——"真题 36 份最多"——"真题 = 备考重点"——"资料分配合理"。

Chapter 模型（3 字段）：

interface Chapter {
  id: number;
  title: string;
  count: number;
}

3 字段：id/title/count——"章节实体"——"标题 + 资料数"——"极简模型"——"count = 资料份数"。

五、资料页的交互细节与可用性分析

5.1 课程胶囊的"单选"

4 胶囊单选——"@State activeCourse"——"红底白字选中"——"点击切换"——"单选交互"——"同系列胶囊"。

5.2 章节列表的"导航"

5 章节——"章节导航"——"教材结构"——"资料定位"——"结构化浏览"——"章节的价值"。

5.3 资料份数的"内容丰富度"

12/18/24/15/36 份——"章节资料量"——"内容丰富度"——"真题最多 36"——"用户看份数选择"——"数据透明"。

5.4 资料页的"色彩心理学"

考试红（#EB5757）——"红色 = 选中"——"考试红胶囊"——"备考主题色"——"红色 = 重点"——"选中 = 重点"。

5.5 资料页的"信息层级"

L1 标题（Header）→ L2 课程（CourseTab）→ L3 章节（ChapterList）——"3 层信息"——"从标题到课程到章节"——"渐进式披露"。

5.6 资料页的"决策路径"

选课程（胶囊）→ 看章节（列表）→ 点击（进资料）→ 下载/收藏——"4 步决策"——"从课程到资料"——"备考转化链"。

5.7 资料页的"对比与统一"

统一：5 章节同结构（📑/标题/份数/箭头）——"列表项统一"。 对比：5 章节数据不同（标题/份数）——"差异在数据"——"结构同构"。

5.8 资料页的"demo 完整性"

课程 + 章节 = 完整资料页——"可切换可点击"——"demo 的完成度"——"资料浏览完整"。

5.9 资料页的"设计哲学"

资料页的 3 个设计哲学：

1. 分类优先——课程胶囊
2. 结构优先——章节导航
3. 数据优先——资料份数透明

"分类 + 结构 + 数据的资料页"——"学习资料页的设计原则"——"从哲学看设计"。

5.10 资料页的"系列创新"

横滑课程胶囊是系列复用——"37 资料页"——"横滑胶囊 + 章节列表"——"资料导航范式"——"章节浏览"。

5.11 资料页的"终评"

课程胶囊 + 章节列表 = 完整资料页——"资料页的完成度"——"可上线级"——"系列学习资料标杆"。

5.12 章节的"教材结构"

函数/导数/积分/微分方程/真题——"高数标准教材"——"章节顺序"——"学习进度"——"教材真实"——"备考的完整"。

5.13 资料页的"与首页呼应"

首页高数课程 → 资料页高数章节——"跨页一致"——"课程体系统一"——"数据连贯"——"备考闭环"。

5.14 资料页的"章节导航价值"

章节 = 教材目录——"结构化导航"——"按章定位"——"复习进度"——"章节的价值"——"资料的组织"——"学习的结构化"。

5.15 资料页的"份数决策"

36 份真题 vs 12 份第一章——"份数对比"——"内容丰富度"——"用户选份数多的"——"数据的决策"——"份数的价值"——"备考资料的选择"。

5.16 资料页的"胶囊选中三重态"

红底 + 白字 + 圆角——"三重选中"——"红白对比"——"选中清晰"——"主题色 = 选中"——"选中态的设计"——"视觉的引导"。

5.17 资料页的"emoji 体系"

📑 + >——"2 个符号"——"资料 + 跳转"——"低成本图标"——"emoji = 功能"——"视觉的简洁"。

5.18 资料页的"横滑与滚动"

课程横滑 + 章节纵滚——"双向滚动"——"横向切课 + 纵向找章节"——"交互的丰富"——"浏览的立体"——"移动端惯例"。

5.19 资料页的"数据流"

activeCourse 状态 → 章节过滤——"课程驱动章节"——"demo 静态展示"——"真实产品 filter"——"数据的扩展"——"状态驱动"。

5.20 资料页的"用户心智"

"按章节复习"——"学生场景"——"章节刷题"——"系统复习"——"场景驱动"——"章节的价值"——"复习的效率"。

5.22 资料页的"最终设计评价"

课程胶囊 + 章节列表 = 完整资料页——"从分类到结构到数据的完整"——"可上线级"——"系列学习资料标杆"——"资料页完成度评级"。

5.23 资料页的"色彩一致性"

考试红贯穿——"胶囊选中红"——"品牌记忆"——"红色 = 备考"——"主题色辨识"——"色彩品牌"。

5.24 资料页的"章节点击反馈"

点击章节弹 Toast——"章节跳转占位"——"用户可交互"——"反馈完整"——"操作的确定性"——"章节的可点性"。

5.25 资料页的"份数递增"

12→18→24 递增——"章节递进"——"内容增多"——"难度递增"——"学习递进"——"资料分配"——"数据合理"。

5.26 资料页的"demo 完整性"

课程 + 章节 = 完整资料页——"功能完整"——"可切换可点击"——"demo 的可用"——"资料浏览完整链"。

5.27 资料页的"跨 App 复用"

课程胶囊（34/36/37 共用）——"模板复用"——"一套胶囊多 App"——"组件沉淀"——"设计效率"——"系列统一"。

5.28 资料页的"章节名规范"

"第一章 函数与极限"——"章节命名规范"——"教材目录格式"——"统一命名"——"用户熟悉"——"命名规范"。

5.29 资料页的"资料量提示"

"份资料" 单位——"数量单位"——"内容量提示"——"用户预估"——"信息透明"——"数据的展示"。

六、总结：考试红 + 课程胶囊 + 章节列表

App 37 资料页一句话：用考试红（#EB5757）组织一个"课程胶囊 + 章节列表"的资料浏览页——4 个横滑课程胶囊用红底白字选中态提供课程切换，5 个章节目录用 📑 emoji + 章节名 + 资料份数 + > 箭头结构化展示教材内容。

3 个设计亮点：

1. 横滑课程胶囊——4 课单选切换
2. 章节导航——5 章节教材结构
3. 资料份数透明——12/18/24/15/36 份

主题色设计逻辑：考试红 = 备考/重点——"资料页用考试红，选中胶囊与品牌色一致"——"主题色贯穿"。

与系列呼应：固定 Header（系列）、课程胶囊（34 课程/36 成色）、@State 单选（系列）、ForEach 列表（系列）、emoji 图标（系列）、箭头导航（36 菜单）——"37 资料把系列的胶囊 + 列表 + 状态手法组合出'资料浏览'场景"。

体验细节：课程切换、章节导航、份数透明、教材结构——"资料页的核心 = 让用户'3 秒选课 + 5 秒找章节'"。

可扩展性展望：真实资料数据、章节过滤联动、资料预览、下载、收藏、进度——"demo 的资料页骨架完整"。

六、扩展思考：资料页的浏览架构与设计哲学

6.1 资料页的"浏览路径"

完整浏览路径：

看 Header → 选课程（胶囊）→ 看章节（列表）→ 点章节 → 看资料 → 下载/收藏

"资料页的浏览路径"——课程胶囊是"一级分类"、章节是"二级导航"、资料是"三级内容"——"三级渐进"——"从课程到资料"——"资料浏览的标准范式"。

6.2 资料页的"信息架构"

3 层信息：

1. L1 标题（Header）——"资料浏览"
2. L2 课程（CourseTab）——"什么课"
3. L3 章节（ChapterList）——"什么章节"

"3 层渐进式"——"从标题到课程到章节"——"信息的金字塔"——"用户按需深入"。

6.3 资料页的"业务建模"

Chapter 模型 3 字段（id/title/count）——"3 字段建模"——"章节的最小集"——"目录字段"——加课程（course）、加内容（content）即可扩展——"数据模型的扩展点"。

6.4 资料页的"对比与统一"

统一：5 章节同结构（📑/标题/份数/箭头）——"列表项的统一"。 对比：5 章节数据不同（标题/份数）——"差异在数据"——"结构同构 + 数据异构"。

6.5 资料页的"设计哲学"

资料页的 3 个设计哲学：

1. 分类优先——课程胶囊快速切课
2. 结构优先——章节导航教材结构
3. 数据优先——资料份数透明

"分类 + 结构 + 数据的资料页"——"学习资料页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何资料/文库类 App"。

6.6 资料页的"终评"

App 37 资料页综合评估——"三区结构 + 考试红主题 + 完整浏览链"——"资料页的完成度评级"——"一个可上线级的资料浏览页"——"系列学习资料的标杆"——"demo 的高完成度"。

七、彩蛋：资料页的细节设计

7.1 课程胶囊的"横滑"

Scroll 横滑——"手指横移"——"4 胶囊横排"——"横向浏览"——"胶囊切换"——"横滑的引导"——"移动端惯例"。

7.2 章节的"教材结构"

函数极限 → 导数微分 → 积分 → 微分方程 → 真题——"高数标准教材"——"5 章覆盖"——"学习顺序"——"教材真实"——"备考的完整"。

7.3 真题 36 份的"重点"

历年真题汇总 36 份最多——"真题 = 备考核心"——"真题份数最多"——"资料分配"——"真题的价值"——"备考重点"。

7.4 📑 的"统一 emoji"

5 章节同 📑——"资料符号"——"统一图标"——"资料的视觉"——"emoji = 资料"——"低成本"。

7.5 > 箭头的"跳转"

">" 16 号——"跳转箭头"——"进入章节"——"通用符号"——"方向语言"——"导航的提示"。

7.6 资料份数的"单位"

"12 份资料"——"份数 + 单位"——"资料量"——"内容丰富度"——"数字信息"——"用户的参考"。

7.7 课程胶囊的"红白对比"

红底白字 vs 白底灰字——"选中 vs 未选"——"对比强烈"——"选中态清晰"——"主题色 = 选中"——"视觉的引导"。

7.8 资料页的"demo 价值"

课程 + 章节 = 完整资料页——"可切换可点击"——"资料浏览演示"——"资料页模板"——"学习资料沉淀"。

7.9 资料页的"备考场景"

"按章节刷题"——"学生场景"——"章节复习"——"按章找资料"——"场景驱动"——"资料的价值"。

7.10 资料页的"学习闭环"

选课 → 找章节 → 下资料 → 复习——"学习完整闭环"——"从分类到内容"——"备考全流程"——"资料页的价值"。

7.11 课程胶囊的"间距 10"

Row space 10——"胶囊间距"——"紧凑排列"——"横向布局"——"胶囊的呼吸"——"间距设计"。

7.12 章节卡的"14 padding"

14 padding——"标准内边距"——"点击区舒适"——"卡片的呼吸"——"14 = 系列标准"——"章节卡的规范"。

7.13 资料的"高数教材"

高数章节完整——"教材真实性"——"函数极限到微分方程"——"高数核心"——"教材覆盖"——"学习的完整"——"资料的专业"。

7.14 章节的"真题汇总"

历年真题汇总——"备考核心章节"——"真题 = 考前冲刺"——"36 份最多"——"真题的价值"——"考前必刷"——"备考的重点"。

7.15 资料的"emoji 选择"

📑 资料符号——"文件/资料"——"章节的视觉"——"统一图标"——"emoji 的语义"——"低成本"——"资料的识别"。

7.16 资料的"跨页课程"

首页/资料/搜索 同一课程体系——"跨页统一"——"高数/英语/数据结构/物理"——"4 门课贯穿"——"数据一致"——"备考生态"——"demo 的完整"。

八、总结与展望

App 37 资料页的核心价值：用考试红 + 课程胶囊 + 章节列表，构建一个"3 秒选课 + 5 秒找章节"的资料浏览页——这是学习资料/文库类 App 的标准范式。

与系列对比：

App	列表/分类类页面	决策
34	资料分栏	看什么资料
35	笔记详情	赞不赞
37	资料浏览	看哪章

"37 资料页的决策是'看哪个章节的资料'"——"资料页 = 分类浏览"——"每个分类页面都在帮用户组织内容"——"37 帮用户按章找资料"。

终评：考试红 + 课程胶囊 + 章节列表 = 完整资料页——"从配色到浏览链的完整设计"——"资料页的标杆"。

补充说明：本篇所有代码引用均基于 37-exam-bank/entry/src/main/ets/pages/Func1Tab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖资料首屏、大学英语课程切换、第一章章节点击、滚动后历年真题汇总四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。资料页的课程胶囊与首页课程 Grid、搜索页热词构成跨页课程体系，5 章节的高数教材结构（含真题汇总 36 份）体现了学习资料类页面的标准导航范式。