三、HarmonyOS Next二级页面详解：案例列表的实现与设计

项目源码已开源（持续更新中~~）： 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 })

列表实现的关键点：

1. 使用List和ForEach组合渲染案例列表
2. 每个案例项使用Column布局，包含案例名称和描述两个Text组件
3. 案例项样式：白色背景、圆角边框(20)、固定宽度(300vp)、居中对齐
4. 点击事件使用router.pushUrl跳转到案例详情页，传入articlePath作为目标路径
5. 使用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. 数据流向

数据流向可以概括为：

1. 路由配置文件定义案例数据
2. 页面组件导入并存储数据
3. UI组件通过ForEach渲染数据
4. 用户点击触发路由跳转，将articlePath传递给路由系统

五、页面导航实现

1. 返回导航

Button('← 返回')
    // 样式属性...
    .onClick(() => {
        router.back();
    })

返回导航使用router.back()方法，将用户带回上一页（首页）。

2. 前进导航

.onClick(() => {
    router.pushUrl({ url: item.articlePath });
})

前进导航使用router.pushUrl方法，将用户带到案例详情页。这种方式会将当前页面保留在导航栈中，用户可以通过返回按钮回到案例列表页。

六、总结

二级页面的设计，也是主要是通过一级页面的分流， 来更加清晰的进行归类， 其实这里的设计，如果设计成Tabs 可能会更好些吧， 嗨主要是知识学习，至于UI将就着看吧