HarmonyOS Next 教育应用培训详情页开发（二）

3. 标签栏构建

TabBarBuilder 方法用于构建标签栏，根据当前选中的标签页索引设置不同的样式，点击标签时切换标签页。

@Builder
TabBarBuilder(title: string, targetIndex: number) {
  Text(title)
    .fontSize(px2vp(14 * 3.5))
    .fontWeight(500)
    .fontColor(targetIndex === this.currentIndex ? '#FFFFFF' : '#000000')
    .width(px2vp(60 * 3.5))
    .height(px2vp(36 * 3.5))
    .borderRadius(px2vp(21 * 3.5))
    .textAlign(TextAlign.Center)
    .backgroundColor(targetIndex === this.currentIndex ? '#0A59F7' : '#E5E5E5')
    .padding(5)
    .border(targetIndex === this.currentIndex ? {
      width: { bottom: 2 },
      color: { bottom: $r('app.color.blue_text_color') },
      style: {
        bottom: BorderStyle.Solid
      }
    } : {
      width: { bottom: 0 },
    })
    .margin({ left: 10, right: 10 })
    .onClick(() => {
      this.tabsController.changeIndex(targetIndex)
    })
}

4. 页面构建

build 方法构建了整个页面，包括培训的基本信息展示、标签栏和标签内容。标签内容使用 Tabs 和 TabContent 组件实现，根据不同的标签页展示不同的内容。

build() {
  NavDestination() {
    Column() {
      Column() {
        // 培训基本信息展示
        Text(this.detailInfo.title)
          // ...
        Row() {
          // ...
        }

        // 标签栏
        Flex({ direction: FlexDirection.Row }) {
          this.TabBarBuilder('简介', 0)
          this.TabBarBuilder('课程', 1)
          this.TabBarBuilder('考试', 2)
        }
      }

      // 标签内容
      Column() {
        Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
          TabContent() {
            // 简介
            IntroductionComponent()
              // ...
          }

          TabContent() {
            // 课程
            CourseComponent()
              // ...
          }

          TabContent() {
            // 考试
            ExaminationComponent({
              onClickItem: (): void => this.goToExaminationDetail()
            })
              // ...
          }
        }.onChange((index: number) => {
          this.currentIndex = index;
        })
      }
    }
  }
  .margin({ top: 30 })
  .backgroundColor('#FFFFFF')
  .title(this.title)
  .onReady((ctx: NavDestinationContext) => {
    this.params = (ctx?.pathInfo?.param as NavInfo);
    this.title = this.params.title
    let id = (JSON.parse(this.params.params) as IdInfo).id
    this.detailInfo = TrainList.find(v => v.id == id) as TrainInfo
  })
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个教育应用的培训详情页面。该页面通过状态管理、导航逻辑和标签页组件，为用户提供了清晰的培训信息展示和交互体验。开发者可以根据实际需求进一步扩展页面功能，如增加更多的标签页、优化页面样式等。