HarmonyOS Next 教育应用之在线考试页面开发（一）

HarmonyOS Next 教育应用之在线考试页面开发

概述

在 HarmonyOS Next 教育类应用开发中，实现一个在线考试列表展示页面是常见需求，该页面可以方便用户查看各类考试信息并进入考试详情。下面将介绍如何构建这样一个在线考试列表页面。

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

1. 页面组件定义与状态管理

使用 @Entry 和 @Component 装饰器定义页面组件，同时初始化滚动器和导航栈。

@Entry
@Component
export struct MineOnlineTestPage {
  scroller: Scroller = new Scroller()
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack;
}

2. 列表项构建

MineCourseListItem 构建器函数用于构建列表中的每个考试项，展示考试状态、标题、时间和参与人数等信息，点击列表项可跳转到考试详情页。

@Builder
MineCourseListItem(model: MineOnlineTestModel) {
  RelativeContainer() {
    Text(model.status)
      .alignRules({
        center: { anchor: 'name', align: VerticalAlign.Center },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
      })
      .fontWeight(FontWeight.Normal)
      .width(60)
      .height(25)
      .backgroundColor('#f56c6c')
      .textAlign(TextAlign.Center)
      .fontColor(Color.White)
      .fontSize(12)
      .id('status')
      .offset({
        x: 10,
        y: 10
      })

    Text(model.text)
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        top: { anchor: '__container__', align: VerticalAlign.Top },
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('333333')
      .fontSize(16)
      .layoutWeight(1)
      .id('name')
      .width('72%')
      .offset({
        x: 80,
        y: 10
      })

    Text(model.beginTimer + '~' + model.endTimer + '截止')
      .alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('aaaaaa')
      .fontSize(12)
      .id('timer')
      .offset({
        x: 10,
        y: -5
      })

    Text(model.nums + '人参与')
      .alignRules({
        center: { anchor: 'timer', align: VerticalAlign.Center },
        right: { anchor: '__container__', align: HorizontalAlign.End },
      })
      .fontWeight(FontWeight.Normal)
      .fontColor('aaaaaa')
      .fontSize(12)
      .id('nums')
      .offset({
        x: -10,
        y: -5
      })
  }
  .margin({ left: $r('app.float.list_left_margin'), right: $r('app.float.list_left_margin') })
  .height('110vp')
  .onClick(() => {
    this.pathStack.pushPathByName('ExaminationDetailPage', null)
  })
}