四、HarmonyOS Next案例展示页面：MainPage深度解析

项目源码已开源（持续更新中~~）： 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容器，包含两个按钮：

1. Blogs按钮：

   • 点击时使用router.pushUrl导航到博客列表页面
   • 目标路径为"view/BlogViewList"

2. 返回按钮：

   • 文本包含左箭头符号(←)，增强可识别性
   • 点击时使用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页面。

七、总结

好了 ，手把手的项目了解就到这里，其实还有个四级页面 用于展示与案例项管理的文章讲解内容， 以及五级页面，对象的文章详情， 由于布局过于简单，因此不在讲解了， 后面就进入真正的案例讲解喽~~~