项目源码已开源（持续更新中~~）： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial
项目演示
注意： 项目需要再真机或模拟器中运行， 否则会出现部分图片无法展示的问题
一、概述
在HarmonyOS Next开发者手册应用中，二级页面是连接首页和具体案例详情的重要桥梁。本文将深入分析/secondPage目录中的三个核心文件：BasicCaseList.ets、AdvancedCaseList.ets和HybridCaseList.ets。这三个文件分别对应应用中的三个学习阶段：萌新小白、登堂入室和进阶高手。通过对这些页面的分析，我们可以了解HarmonyOS应用的页面导航结构、UI组件使用以及数据流设计。
二、文件结构分析
1. 目录结构
/secondPage/ ├── BasicCaseList.ets // 萌新小白阶段案例列表 ├── AdvancedCaseList.ets // 登堂入室阶段案例列表 └── HybridCaseList.ets // 进阶高手阶段案例列表
这三个文件构成了应用的二级导航层，每个文件对应一个学习阶段的案例列表页面。
2. 导入声明
以BasicCaseList.ets为例，文件开头的导入声明如下：
import { CaseType } from "../../type/type" import router from '@ohos.router'; import {BasicCaseListRouter} from "../../router/index";
这部分代码导入了三个关键模块：
CaseType：自定义的案例类型接口，定义了案例数据的结构router：HarmonyOS提供的路由服务，用于页面跳转BasicCaseListRouter：预定义的案例列表数据，包含该阶段的所有案例
3. 组件声明
@Entry @Component struct Stage1List { // 基础入门阶段案例数据 caseList:CaseType[] = BasicCaseListRouter build() { // UI构建代码 } }
@Entry：标记此组件为页面入口@Component：声明这是一个UI组件caseList：组件的状态变量，类型为CaseType[]，初始值为对应的路由配置数据
三、UI结构实现
1. 整体布局
所有三个页面都采用了相似的布局结构：
Stack() { // 背景层 Column() .width('100%') .height('100%') .backgroundColor('#F0F5FF') // 淡蓝色背景 .justifyContent(FlexAlign.Center) // 内容层 Column({ space: 30 }) { // 返回按钮、标题和列表内容 } .alignItems(HorizontalAlign.Center) .justifyContent(FlexAlign.Center) .height('100%') .width('100%') }
页面使用Stack组件作为根容器，实现了层叠布局：
- 第一层：全屏淡蓝色背景
- 第二层：主内容区，包含返回按钮、标题和案例列表
2. 返回按钮设计
// 返回按钮 Row() { Button('← 返回') .fontSize(16) .foregroundColor('#f5f5f5') .padding({ left: 16, right: 16, top: 8, bottom: 8 }) .borderRadius(8) .onClick(() => { router.back(); }) } .margin({ right: 32 }) .alignItems(VerticalAlign.Bottom) .justifyContent(FlexAlign.End) .width('92%')
返回按钮的设计特点：
- 使用
Row容器并设置右对齐，使按钮位于页面右上角 - 按钮文本包含左箭头符号，增强可识别性
- 点击事件使用
router.back()实现返回上一页功能 - 统一的样式：浅色文本、圆角边框、适当的内边距
3. 标题设计
三个页面的标题各不相同，反映了不同的学习阶段：
// BasicCaseList.ets Text('萌新小白开始闯关') // AdvancedCaseList.ets Text('闯荡江湖牛刀小试') // HybridCaseList.ets Text('江湖大佬高山仰止')
标题样式统一：
.fontSize(28) .fontWeight(700) .foregroundColor('#262626') .margin({ top: 10 }) .textAlign(TextAlign.Center)
4. 案例列表实现
// 案例列表 List() { ForEach(this.caseList, (item:CaseType, index) => { ListItem() { Column({ space: 16 }) { Text(item.caseName) .fontSize(20) .fontWeight(600) .foregroundColor('#262626') Text(item.desc) .fontSize(16) .foregroundColor('#8C8C8C') } .padding(28) .backgroundColor('white') .borderRadius(20) .width('300vp') .alignItems(HorizontalAlign.Center) .align(Alignment.Center) .justifyContent(FlexAlign.Center) .onClick(() => { router.pushUrl({ url: item.articlePath }); }) }.margin({top:16}) .align(Alignment.Center) .width('100%') }, (item:CaseType) => item.caseName) } .width('100%') .height('80%') .margin({ top: 10, bottom: 10 })
列表实现的关键点：
- 使用
List和ForEach组合渲染案例列表 - 每个案例项使用
Column布局，包含案例名称和描述两个Text组件 - 案例项样式：白色背景、圆角边框(20)、固定宽度(300vp)、居中对齐
- 点击事件使用
router.pushUrl跳转到案例详情页，传入articlePath作为目标路径 - 使用
item.caseName作为列表项的唯一键值，优化渲染性能
四、数据流分析
1. 数据结构
// CaseType接口定义 export interface CaseType { caseName: string; // 案例名称 desc: string; // 案例描述 articlePath: string; // 博文页面路由路径 }
CaseType接口定义了案例数据的结构，包含三个字段：
caseName：案例名称，显示为列表项的标题desc：案例描述，显示为列表项的副标题articlePath：案例详情页的路由路径，用于页面跳转
2. 数据来源
每个页面的数据来自对应的路由配置：
// BasicCaseList.ets caseList:CaseType[] = BasicCaseListRouter // AdvancedCaseList.ets caseList:CaseType[] = AdvancedCaseListRouter // HybridCaseList.ets caseList:CaseType[] = HybridCaseListRouter
路由配置在router/index.ets文件中定义：
export const BasicCaseListRouter:CaseType[] = [ { caseName: '演示数据', desc: '演示数据随着项目需求而改变', articlePath: "Components/TestCase" }, // 更多案例... ];
3. 数据流向
数据流向可以概括为：
- 路由配置文件定义案例数据
- 页面组件导入并存储数据
- UI组件通过
ForEach渲染数据 - 用户点击触发路由跳转，将
articlePath传递给路由系统
五、页面导航实现
1. 返回导航
Button('← 返回') // 样式属性... .onClick(() => { router.back(); })
返回导航使用router.back()方法，将用户带回上一页（首页）。
2. 前进导航
.onClick(() => { router.pushUrl({ url: item.articlePath }); })
前进导航使用router.pushUrl方法，将用户带到案例详情页。这种方式会将当前页面保留在导航栈中，用户可以通过返回按钮回到案例列表页。
六、总结
二级页面的设计，也是主要是通过一级页面的分流， 来更加清晰的进行归类， 其实这里的设计，如果设计成Tabs 可能会更好些吧， 嗨主要是知识学习，至于UI将就着看吧
