Harmonyos5应用开发实战——我的优惠券页面开发（part2）

3. 标签页构建

使用 @Builder 装饰器构建 Tabs 组件的标签页，根据当前选中的索引设置标签的字体颜色和底部边框。

@Builder
tabBuilder(index: number, name: Resource) {
  Column() {
    Text(name)
      .fontColor(this.currentIndex === index ? $r('sys.color.multi_color_09') : $r('sys.color.font_secondary'))
      .fontSize($r('sys.float.Body_L'))
      .fontWeight(FontWeight.Medium)
    if (this.currentIndex === index) {
      Row()
        .width(42)
        .height(0)
        .borderWidth({ bottom: 2 })
        .borderColor($r('sys.color.multi_color_09'))
        .margin({ top: 4 })
    }
  }
  .width(Constants.FULL_SIZE)
  .height(50)
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Start)
  .padding({ top: 12, bottom: 12 })
  .backgroundColor($r('sys.color.comp_background_primary'))
}

4. 页面布局与组件使用

在 build 方法中，使用 NavDestination、NavHeaderBar、Scroll 和 Tabs 等组件构建页面布局。Tabs 组件包含四个 TabContent，分别展示全部、可用、已过期和已使用的优惠券列表。

build() {
  NavDestination() {
    NavHeaderBar({ title: $r('app.string.my_coupon') })
    Scroll() {
      Tabs({ index: this.currentIndex }) {
        TabContent() {
          List({ space: 8 }) {
            ForEach(this.myCouponsAll, (item: MyCouponResp) => {
              ListItem() {
                CouponCard({ coupon: item })
              }
            }, (item: MyCouponResp) => JSON.stringify(item))
          }.listStyle().scrollBar(BarState.Off)
        }.tabBar(this.tabBuilder(0, $r('app.string.all')))

        TabContent() {
          List({ space: 8 }) {
            ForEach(this.myCouponsUsable, (item: MyCouponResp) => {
              ListItem() {
                CouponCard({ coupon: item })
              }
            }, (item: MyCouponResp) => JSON.stringify(item))
          }.listStyle().scrollBar(BarState.Off)
        }.tabBar(this.tabBuilder(1, $r('app.string.available')))

        TabContent() {
          List({ space: 8 }) {
            ForEach(this.myCouponsExpired, (item: MyCouponResp) => {
              ListItem() {
                CouponCard({ coupon: item })
              }
            }, (item: MyCouponResp) => JSON.stringify(item))
          }.listStyle().scrollBar(BarState.Off)
        }.tabBar(this.tabBuilder(2, $r('app.string.expired')))

        TabContent() {
          List({ space: 8 }) {
            ForEach(this.myCouponsUsed, (item: MyCouponResp) => {
              ListItem() {
                CouponCard({ coupon: item })
              }
            }, (item: MyCouponResp) => JSON.stringify(item))
          }.listStyle().scrollBar(BarState.Off)
        }.tabBar(this.tabBuilder(3, $r('app.string.coupon_used')))
      }
      .width(Constants.FULL_SIZE)
      .barHeight(50)
      .layoutWeight(1)
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        this.currentIndex = targetIndex
      })
      .onChange((index) => {
        this.currentIndex = index;
      })
    }
    .layoutWeight(1)
    .scrollBar(BarState.Off)
    .align(Alignment.Top)
    .backgroundColor('#F2F1F3F5')
    .margin({ bottom: this.windowBottomHeight })
  }.hideTitleBar(true)
}

通过以上核心功能的实现，在HarmonyOS 5应用中成功开发了“我的优惠券”页面，为用户提供了清晰的优惠券信息展示和切换体验。