HarmonyOS Next 教育应用之课程列表组件开发（二）

3. 课程列表渲染
   • 功能：在 build 方法中，根据 CourseList 的长度进行判断。如果列表不为空，则使用 List 和 ForEach 组件渲染课程列表项；如果为空，则显示缺省图。
   • 代码段：

build() {
  Column() {
    if (this.CourseList.length > 0) {
      List({
        space: 10
      }) {
        ForEach(this.CourseList, (item: CourseInfo, index: number) => {
          // 课程列表项内容
        }, (item: CourseInfo) => JSON.stringify(item))
      }
      .alignListItem(ListItemAlign.End)
    } else {
      //缺省图
      EmptyComponent({
        message: '暂无数据'
      })
    }
  }
  .width(TrainConstants.FULL_WIDTH)
  .height(TrainConstants.FULL_HEIGHT)
  .backgroundColor($r('app.color.page_gray_color'))
}

4. 课程列表项布局
   • 功能：每个课程列表项包含课程图片、课程类型（选修或必修）、课程标题、教师信息、学时和学习进度。通过 Row、Column 和 Stack 组件进行布局。
   • 代码段：

ListItem() {
  Row() {
    Stack({
      alignContent: Alignment.TopStart
    }) {
      Image(item.img)
        .width(120)
        .height(70)
        .borderRadius(10)
        .objectFit(ImageFit.Cover)
      Text(item.type == 0 ? '选修' : '必修')
        // 样式设置
    }
    .width(120)
    .height(70)
    .backgroundColor(Color.Pink)
    .borderRadius(10)
    .margin({
      right: 10
    })

    Column() {
      Text(item.title)
        // 样式设置
      Row() {
        Text(`教师：${item.name}`)
          // 样式设置
        Text(`学时：${item.hour}`)
          // 样式设置
      }
      .margin({
        top: 15,
        bottom: 5
      })
      .width(TrainConstants.FULL_WIDTH)

      Text(`进度：${item.process}%`)
        // 样式设置
    }
    .layoutWeight(1)
  }
}
.backgroundColor(Color.White)
.padding(10)
.borderRadius(10)
.onClick(() => {
  this.goToDetail(item.id)
})

总结

通过以上代码的实现，我们在 HarmonyOS Next 中成功构建了一个课程列表组件。利用 HarmonyOS 提供的组件化开发、数据绑定和导航机制，我们可以方便地展示课程列表，并支持用户点击课程项跳转到详情页。该组件结构清晰，易于维护和扩展，有助于开发者在 HarmonyOS Next 平台上快速开发出高质量的教育应用。