HarmonyOS鸿蒙Next中Tabs使用SubTabBarStyle后，如何为tab item title添加红点角标

HarmonyOS鸿蒙Next中Tabs使用SubTabBarStyle后，如何为tab item title添加红点角标 参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabcontent#subtabbarstyle9实现了tab item下划线及切换动画效果，但是如何为tab title添加角标（badge）呢，比如红点，数字


更多关于HarmonyOS鸿蒙Next中Tabs使用SubTabBarStyle后，如何为tab item title添加红点角标的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以参考这个示例 基于Tabs组件实现常见导航样式

更多关于HarmonyOS鸿蒙Next中Tabs使用SubTabBarStyle后，如何为tab item title添加红点角标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中为Tabs的SubTabBarStyle添加红点角标，可通过TabContent组件实现。在TabContent中使用@Builder装饰器自定义tab内容，结合Badge组件显示红点。示例代码：

TabContent() {
  Badge({
    count: 1,
    position: 'rightTop',
    style: { color: 'red' }
  }) {
    Text('Tab1')
  }
}

需在Tabs组件中设置tabBar为SubTabBarStyle，并在TabContent中为每个tab item配置对应的Badge。红点样式可通过Badge参数调整。

在HarmonyOS Next中为Tabs的tab item title添加红点角标，可以使用@Badge装饰器结合自定义样式实现。以下是具体实现方法：

  1. 在SubTabBarStyle样式中，通过@Builder自定义tab item内容：
Tabs({
  barPosition: BarPosition.End,
  controller: this.tabsController
}) {
  // tab内容...
}
.barMode(BarMode.SubTabBarStyle)
.subTabBarStyle({
  itemSpace: 20,
  indicator: this.IndicatorBuilder()
})
  1. 自定义tab item时添加Badge：
@Builder
TabBuilder(index: number) {
  Column() {
    if (this.showBadge[index]) { // 控制是否显示角标
      Badge({
        count: this.badgeCount[index], // 数字角标
        position: BadgePosition.RightTop,
        style: { badgeSize: 16, badgeColor: Color.Red } // 红点样式
      }) {
        Text(this.tabTitles[index])
          .fontSize(16)
      }
    } else {
      Text(this.tabTitles[index])
        .fontSize(16)
    }
  }
}
  1. 在SubTabBarStyle参数中应用自定义Builder：
.subTabBarStyle({
  itemSpace: 20,
  indicator: this.IndicatorBuilder(),
  builder: (index: number) => this.TabBuilder(index) 
})

注意：需要提前在组件状态中定义showBadge和badgeCount数组来控制每个tab的角标显示状态和内容。

回到顶部