二、探索HarmonyOS Next应用的入口：深度解析Index页面

项目源码已开源（持续更新中~~）： 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布局，包含三个部分：

1. 图标：使用Image组件显示阶段图标
2. 文本信息：使用Column包含两个Text，分别显示阶段名称和描述
3. 导航按钮：使用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, 后面有机会在优化吧~~