项目源码已开源（持续更新中~~）： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial
项目演示
注意： 项目需要再真机或模拟器中运行， 否则会出现部分图片无法展示的问题
一、概述
MainPage.ets是HarmonyOS Next开发者手册应用中的三级页面，它作为具体案例的展示页面，连接了二级导航页面和具体的功能展示。本文将深入分析这个文件的代码结构、UI组件使用以及导航实现，帮助开发者理解HarmonyOS应用的多级页面设计模式。
二、文件结构分析
1. 导入声明
import router from '@ohos.router';
这部分代码导入了HarmonyOS提供的路由服务，用于页面跳转。与二级页面相同，MainPage也使用了@ohos.router模块来实现页面间的导航。
2. 组件声明
@Component export struct MainPage { // 组件实现 }
与二级页面不同，MainPage使用了@Component装饰器而非@Entry和@Component的组合。
主要是三级页面在我的设计中应该是案例的分层， 因此这里采用的用静态模块来开发， 从而避免多项目的影响不利于单独案例的掌握
三、UI结构实现
1. 整体布局
Column({ space: 30 }) { // 内容组件 } .backgroundColor('#F0F5FF')// 淡蓝色背景 .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.Start) .height('100%') .width('100%')
页面使用Column组件作为根容器，实现了垂直布局：
- 设置了组件间距为30像素
- 背景色为淡蓝色(#F0F5FF)，与一级和二级页面保持一致
- 内容左对齐(HorizontalAlign.Start)
- 占满整个屏幕(100%宽高)
这种布局方式简洁明了，适合展示案例内容。
2. 导航按钮设计
Row() { Button('Blogs') .fontSize(16) .foregroundColor('#f5f5f5') .padding({ left: 16, right: 16, top: 8, bottom: 8 }) .borderRadius(8) .onClick(() => { router.pushUrl({url:"view/BlogViewList"}) }) 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.SpaceBetween) .width('100%') .height('50rpx')
导航区域使用Row容器，包含两个按钮：
- Blogs按钮：
- 点击时使用
router.pushUrl导航到博客列表页面 - 目标路径为"view/BlogViewList"
- 返回按钮：
- 文本包含左箭头符号(←)，增强可识别性
- 点击时使用
router.back()返回上一页
两个按钮共享相同的样式：
- 字体大小：16像素
- 文字颜色：浅灰色(#f5f5f5)
- 内边距：水平16像素，垂直8像素
- 边框圆角：8像素
按钮容器的设计特点：
- 右侧外边距：32像素
- 底部对齐(VerticalAlign.Bottom)
- 两端对齐(FlexAlign.SpaceBetween)，使两个按钮分别位于行的两端
- 宽度：100%
- 高度：50rpx（响应式像素单位）
四、导航功能实现
1. 返回导航
Button('← 返回') // 样式属性... .onClick(() => { router.back(); })
返回导航使用router.back()方法，将用户带回上一页（二级页面）。这与二级页面中的返回按钮实现方式相同，保持了导航体验的一致性。
2. 博客列表导航
Button('Blogs') // 样式属性... .onClick(() => { router.pushUrl({url:"view/BlogViewList"}) })
博客列表导航使用router.pushUrl方法，将用户带到博客列表页面。这种方式会将当前页面保留在导航栈中，用户可以通过返回按钮回到案例页面。
五、与项目其他页面的关系
MainPage作为三级页面，在整个应用的导航结构中处于以下位置：
Index (主页) ├── BasicCaseList (萌新小白) │ └── MainPage (案例详情) ← 当前分析的页面 ├── AdvancedCaseList (登堂入室) │ └── MainPage (案例详情) ├── HybridCaseList (进阶高手) │ └── MainPage (案例详情) └── BlogViewList (博客列表) └── BlogDetail (博客详情)
MainPage可以通过返回按钮导航回对应的二级页面（BasicCaseList、AdvancedCaseList或HybridCaseList），也可以通过Blogs按钮直接跳转到BlogViewList页面。
七、总结
好了 ，手把手的项目了解就到这里，其实还有个四级页面 用于展示与案例项管理的文章讲解内容， 以及五级页面，对象的文章详情， 由于布局过于简单，因此不在讲解了， 后面就进入真正的案例讲解喽~~~
