HarmonyOS Next 教育应用之课程列表展示组件开发（二）

3. 标签栏构建
   • 功能：构建标签栏，根据当前选中的标签索引设置字体加粗和下划线样式，并处理点击事件。
   • 代码段：

@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 },
      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. 组件构建
   • 功能：构建组件的 UI 结构，包括分段按钮和标签页内容，标签页内容为课程列表展示组件。
   • 代码段：

build() {
  Column() {
    SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
      .borderRadius(px2vp(20 * 3.5))
      .width(px2vp(328 * 3.5))
      .margin({top:px2vp(22 * 3.5)})

    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      ForEach(this.TabBarList, (item: TabBarInfo) => {
        TabContent() {
          CourseListComponent({
            CourseList: this.List
          })
            .width('92%')
        }
      }, (item: TabBarInfo) => JSON.stringify(item))
    }
    .width(TrainConstants.FULL_WIDTH)
    .margin({
      top: 10
    })
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
  .backgroundColor('#F1F3F5')
  .width(TrainConstants.FULL_WIDTH)
  .height(TrainConstants.FULL_HEIGHT)
}

总结

通过以上代码的实现，我们在 HarmonyOS Next 中成功构建了一个具备分类筛选功能的课程列表展示组件。利用 HarmonyOS 提供的状态管理、组件化开发和事件处理机制，我们可以方便地实现数据的筛选和 UI 的更新。该组件不仅提高了用户体验，也为教育类应用的课程管理提供了一种有效的解决方案。同时，代码结构清晰，易于维护和扩展，有助于开发者在 HarmonyOS Next 平台上快速开发出高质量的教育应用。