HarmonyOS Next 教育应用培训列表页开发实践（一）

HarmonyOS Next 教育应用培训列表页开发实践

概述

在 HarmonyOS Next 教育类应用开发中，展示培训列表是一个常见的需求。下面将介绍如何构建一个培训列表页面，展示培训的基本信息，并支持点击跳转详情页。

核心代码功能及对应代码段

1. 组件定义与数据引入

定义了一个名为 TrainListPage 的组件，引入了培训信息的常量和数据模型，同时使用 @Prop 装饰器接收培训信息列表。

import TrainConstants from '../common/constants/TrainConstants'
import { TrainInfo, TrainList } from '../viewmodel/TrainInfoModel'
import {EmptyComponent} from './Empty'
import { NavInfo,IdInfo } from '../viewmodel/NavInfoModel'

@Entry
@Component
export struct TrainListPage {
  @Prop dataList: TrainInfo[] = TrainList
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack
}

2. 跳转详情页功能

goToDetail 方法用于处理点击培训项时的跳转逻辑，通过 NavInfo 和 IdInfo 传递培训的 ID 信息，跳转到培训详情页。

goToDetail(id: number) {
  let obj: IdInfo = new IdInfo(id)
  let params = new NavInfo('课程', JSON.stringify(obj))
  this.pathStack.pushPathByName('TrainDetailPage', params)
}