HarmonyOS Next 教育应用之我的课程页面开发（一）

HarmonyOS Next 教育应用之我的课程页面开发

概述

在 HarmonyOS Next 教育类应用开发中，打造一个清晰易用的“我的课程”页面，能帮助用户方便地管理和查看自己的课程信息。下面将介绍如何构建这样一个页面。

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

1. 组件状态与控制器管理
   • 功能：定义组件状态，如字体颜色、当前选中的标签索引等，同时创建 TabsController 和 Scroller 实例，用于管理标签切换和列表滚动。
   • 代码段：

@Preview
@Component
export struct MineCoursePage {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private tabController: TabsController = new TabsController()
  scroller: Scroller = new Scroller()
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack
}

2. 课程列表项构建
   • 功能：构建课程列表中的每一项，包含课程图片、名称、教师、进度等信息，并设置点击事件，点击后跳转到课程详情页。
   • 代码段：

@Builder
MineListItem(model: MineCourseListModel) {
  RelativeContainer() {
    Image($r('app.media.train_pic01'))
      .objectFit(ImageFit.Cover)
      .width($r('app.float.icon_dock_height'))
      .height(80)
      .borderRadius(5)
      .id('icon')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
      })
      .offset({
        x: 10
      })

    Text(model.name)
      .alignRules({
        left: { anchor: 'icon', align: HorizontalAlign.End },
        top: { anchor: 'icon', align: VerticalAlign.Top },
      })
      .fontWeight(FontWeight.Medium)
      .fontColor('333333')
      .id('name')
      .offset({
        x: 25
      })

    Text('教师:' + model.tec)
      .alignRules({
        left: { anchor: 'name', align: HorizontalAlign.Start },
        bottom: { anchor: 'process', align: VerticalAlign.Top },
        bias: { horizontal: 25, vertical: -10 }
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('#999999')
      .fontSize(12)
      .margin({
        bottom: 5
      })
      .id('tec')
      .offset({
        x: 25
      })

    Text('进度:')
      .alignRules({
        left: { anchor: 'icon', align: HorizontalAlign.End },
        bottom: { anchor: 'icon', align: VerticalAlign.Bottom },
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('#999999')
      .fontSize(12)
      .id('process')
      .offset({
        x: 25
      })

    Progress({ value: 10, type: ProgressType.Linear }).width(120).alignRules({
      left: { anchor: 'process', align: HorizontalAlign.End },
      center: { anchor: 'process', align: VerticalAlign.Center },
    }).id('pro').offset({
      x: 30
    })

    Text(model.process.toString())
      .alignRules({
        left: { anchor: 'pro', align: HorizontalAlign.End },
        center: { anchor: 'process', align: VerticalAlign.Center },
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('#999999')
      .fontSize(12)
      .id('proName')
      .offset({
        x: 40
      })
  }.margin({ left: $r('app.float.list_left_margin'), right: $r('app.float.list_left_margin') }).height('100vp')
  .backgroundColor(Color.White)
  .onClick(() => {
    let obj: IdInfo = new IdInfo(1)
    let params = new NavInfo('课程', JSON.stringify(obj))
    this.pathStack.pushPathByName('TrainDetailPage', params)
  })
}