项目源码已开源（持续更新中~~）： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial
项目演示
注意： 项目需要再真机或模拟器中运行， 否则会出现部分图片无法展示的问题
一、概述
Index.ets是HarmonyOS Next开发者手册应用的入口页面，它展示了应用的主要导航结构和用户界面设计。本文将深入分析这个文件的代码结构、UI组件使用以及路由实现，帮助开发者理解HarmonyOS应用的基本构建模式。
二、文件结构分析
1. 导入声明
// 导入基础组件和路由 import {RouterType} from "../type/type" import {pageRouter} from "../router/index" import router from '@ohos.router';
这部分代码导入了三个关键模块：
RouterType：自定义的路由类型接口，定义了路由项的数据结构pageRouter：预定义的路由配置数据，包含应用的主要导航项router：HarmonyOS提供的路由服务，用于页面跳转
2. 组件声明
@Entry @Component struct IndexPage { // 阶段分类数据 stageCategories: RouterType[] = pageRouter build() { // UI构建代码 } }
@Entry：标记此组件为页面入口@Component：声明这是一个UI组件stageCategories：组件的状态变量，类型为RouterType[]，初始值为pageRouter
三、UI结构实现
1. 整体布局
Stack() { // 背景渐变 Column() .width('100%') .height('100%') .backgroundColor('#F0F5FF') // 淡蓝色背景 .justifyContent(FlexAlign.Center) // 主内容区 Column({ space: 30 }) { // 标题和列表内容 } .padding({ top: 30 }) .height('100%') }
页面使用Stack组件作为根容器，实现了层叠布局：
- 第一层：全屏淡蓝色背景
- 第二层：主内容区，包含标题和列表
这种布局方式使得背景和内容可以独立控制，同时实现视觉上的层次感。
2. 标题设计
// 标题 Text('HarmonyOS Next 开发者手册') .fontSize(32) .fontWeight(700) .foregroundColor('#005FF9') // 华为蓝主色 .margin({ top: 50 })
标题使用Text组件，设置了：
- 字体大小：32像素
- 字体粗细：700（粗体）
- 文字颜色：华为蓝主色(#005FF9)
- 上边距：50像素
这样的设计使标题醒目且符合品牌特性。
3. 列表实现
// 阶段分类列表 List() { ForEach(this.stageCategories, (item: RouterType) => { ListItem() { // 列表项内容 }.margin({ bottom: 16 }) }, (item:RouterType) => item.stage) } .width('95%')
列表使用List和ForEach组合实现：
List：提供列表容器ForEach：遍历stageCategories数组，为每个项创建一个ListItem- 第二个参数
(item:RouterType) => item.stage：提供唯一键值，优化渲染性能
4. 列表项设计
Row({ space: 20 }) { // 阶段图标 Image(item.icon) .width(60) .height(60) .objectFit(ImageFit.Contain) // 阶段信息 Column({ space: 8 }) { Text(item.stage) .fontSize(20) .fontWeight(500) Text(item.desc) .fontSize(14) .foregroundColor('#666') }.width('50%') // 导航按钮 Button('进入') .width(80) .height(35) .backgroundColor('#005FF9') .foregroundColor('white') .borderRadius(18) .onClick(() => { router.pushUrl({ url: item.routePath }); }) } .padding({ left: 24, right: 24, top: 16, bottom: 16 }) .backgroundColor('white') .borderRadius(16) .justifyContent(FlexAlign.SpaceBetween)
每个列表项使用Row布局，包含三个部分：
- 图标：使用
Image组件显示阶段图标 - 文本信息：使用
Column包含两个Text，分别显示阶段名称和描述 - 导航按钮：使用
Button组件，点击时调用router.pushUrl进行页面跳转
列表项的样式设计包括：
- 白色背景
- 圆角边框
- 内边距
- 均匀分布的子元素（通过
justifyContent(FlexAlign.SpaceBetween)实现）
四、路由实现分析
1. 路由数据结构
// 来自type.ets export interface RouterType{ stage: string; // 阶段名称 desc: string; // 阶段描述 icon: string; // 阶段图标 routePath: string; // 二级页面路由路径 }
RouterType接口定义了每个导航项需要的数据：
stage：阶段名称，如"萌新小白"desc：阶段描述，如"掌握HarmonyOS基础"icon：图标资源路径routePath：目标页面的路由路径
2. 路由数据配置
// 来自router/index.ets export const pageRouter:RouterType[] = [ { "stage": "萌新小白", "desc": "掌握HarmonyOS基础", "icon": "common/assect/icon_basic.png", "routePath": "pages/secondPage/BasicCaseList" }, { "stage": "登堂入室", "desc": "深入学习HarmonyOS ", "icon": "common/assect/icon_advanced.png", "routePath": "pages/secondPage/AdvancedCaseList" }, { "stage": "进阶高手", "desc": "精通HarmonyOS的高级功能开发 ", "icon": "common/assect/icon_hybrid.png", "routePath": "pages/secondPage/HybridCaseList" } ]
pageRouter数组包含三个导航项，分别对应三个学习阶段，每个阶段都有对应的图标和目标页面。
3. 路由跳转实现
Button('进入') // 样式属性... .onClick(() => { router.pushUrl({ url: item.routePath }); })
路由跳转通过router.pushUrl方法实现，传入目标页面的URL。这种方式会将当前页面保留在导航栈中，用户可以通过返回按钮回到首页。
五、该项目的主要架构思维
1. 组件化思想
Index页面展示了HarmonyOS的组件化开发思想：
- 使用
@Component创建可复用的UI组件 - 组件内部管理自己的状态和布局
- 通过属性和事件与外部交互
2. 声明式UI
ArkTS的声明式UI使代码更加直观：
- UI结构通过嵌套组件清晰表达
- 样式通过链式调用直接附加到组件上
- 事件处理通过
.onClick()等方法直接绑定
3. 数据与UI分离
代码展示了良好的关注点分离：
- 数据定义在单独的类型文件中
- 路由配置在专门的路由文件中
- UI组件专注于渲染和交互
六、总结
本项目主要通过主页面来层层递进，初版设计的比较low, 后面有机会在优化吧~~
