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

3. 列表构建

ListBuilder 构建器函数使用 List 和 ForEach 组件将考试列表数据渲染成列表，同时设置滚动条和分隔线样式。

@Builder
ListBuilder() {
  List({ scroller: this.scroller }) {
    ForEach(testList, (item: MineOnlineTestModel) => {
      ListItem() {
        this.MineCourseListItem(item)
      }
    }, (item: MineOnlineTestModel) => item.key)
  }
  .scrollBar(BarState.Off)
  .divider({ strokeWidth: 1, color: '#f5f5f5' })
  .width(StyleConstants.FULL_WIDTH)
  .layoutWeight(1)
}

4. 页面构建

build 方法构建整个页面，包括返回按钮、标题和考试列表。

build() {
  NavDestination() {
    Column() {
      Row() {
        RelativeContainer() {
          Image(ResManager.getBackIcon())
            .width(ResManager.getVp_twenty())
            .height(ResManager.getVp_twenty())
            .alignRules({
              center: { anchor: '__container__', align: VerticalAlign.Center },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            })
            .id('back')
            .margin({ left: vp2px(5) })
            .onClick(() => {
              this.pathStack.pop()
            })
          Text('在线考试').alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center },
            center: { anchor: 'back', align: VerticalAlign.Center },
          }).fontWeight(FontWeight.Medium).fontColor('333333').id('text')
        }
      }
      .width(StyleConstants.FULL_WIDTH).backgroundColor(Color.White).height(vp2px(12))

      this.ListBuilder()
    }
  }
  .hideTitleBar(true)
  .margin({top:30})
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个在线考试列表展示页面。该页面具备列表项展示、点击跳转和滚动查看等功能，体现了 HarmonyOS Next 开发的高效性和灵活性。开发者可以根据实际需求进一步扩展页面功能，如增加考试筛选、排序等功能。