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

3. 列表构建
   • 功能：使用 List 组件展示课程列表，通过 ForEach 遍历课程数据，为每个课程数据创建列表项。
   • 代码段：

@Builder
ListBuilder() {
  List({ scroller: this.scroller, space: 10 }) {
    ForEach(courseList, (item: MineCourseListModel) => {
      ListItem() {
        this.MineListItem(item)
      }
    }, (item: MineCourseListModel) => item.key)
  }
  .scrollBar(BarState.Off)
  .margin({
    top: 10
  })
  .width(StyleConstants.FULL_WIDTH)
  .layoutWeight(1)
}

4. 标签栏构建
   • 功能：构建标签栏，包含“在学”和“已学”两个标签，根据当前选中的标签索引改变标签的样式，并处理点击事件，切换标签。
   • 代码段：

@Builder
TabBarBuilder(title: string, targetIndex: number) {
  Text(title)
    .fontWeight(targetIndex === this.currentIndex ? FontWeight.Bold : FontWeight.Normal)
    .padding(5)
    .border(targetIndex === this.currentIndex ? {
      width: { bottom: 2 },
      style: {
        bottom: BorderStyle.Solid
      }
    } : {
      width: { bottom: 0 },
    })
    .margin({ left: 10, right: 10 })
    .onClick(() => {
      this.tabController.changeIndex(targetIndex)
    })
}

5. 页面布局与交互
   • 功能：构建页面整体布局，包含返回按钮、标签栏和课程列表。设置页面标题栏隐藏，处理页面准备就绪事件，获取路径栈信息。
   • 代码段：

build() {
  NavDestination() {
    Column() {
      Row() {
        RelativeContainer() {
          Image(ResManager.getBackIcon())
            .width(ResManager.getVp_twenty())
            .height(ResManager.getVp_twenty())
            .objectFit(ImageFit.Cover)
            .alignRules({
              center: { anchor: '__container__', align: VerticalAlign.Center },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            })
            .id('back')
            .margin({ left: vp2px(5) })
            .onClick(() => {
              this.pathStack.pop()
            })

          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
            this.TabBarBuilder('在学', 0)
            this.TabBarBuilder('已学', 1)
          }.width(200)
          .backgroundColor(Color.White)
          .alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center },
            center: { anchor: 'back', align: VerticalAlign.Center }
          }).id('tabBar')
        }
      }.width(StyleConstants.FULL_WIDTH).height(vp2px(10))
      .backgroundColor(Color.White)

      Column() {
        Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.tabController }) {
          TabContent() {
            this.ListBuilder()
          }.width(StyleConstants.FULL_WIDTH).height(StyleConstants.FULL_HEIGHT)

          TabContent() {
            this.ListBuilder()
          }.width(StyleConstants.FULL_WIDTH).height(StyleConstants.FULL_HEIGHT)
        }
        .onChange((index: number) => {
          this.currentIndex = index
        }).layoutWeight(1)
      }
    }.width(StyleConstants.FULL_WIDTH).height(StyleConstants.FULL_HEIGHT).backgroundColor('#f7f7f7')
  }
  .hideTitleBar(true)
  .onReady((ctx: NavDestinationContext) => {
    this.pathStack = ctx.pathStack
  })
  .margin({top:30})
}

总结

通过以上代码的实现，我们在 HarmonyOS Next 中成功构建了一个“我的课程”页面。利用 HarmonyOS 的组件化开发和状态管理机制，我们实现了课程列表的展示、标签栏的切换和页面跳转等功能。该页面结构清晰，用户可以方便地查看“在学”和“已学”课程，点击课程还能进入详情页。代码具有良好的可维护性和扩展性，有助于开发者在 HarmonyOS Next 平台上开发出更完善的教育应用。