鸿蒙实现自定义Tabbar样式,显示数字红点提示

前言:

DevEco Studio版本:4.0.0.600

Tabs的链接参考:OpenHarmony Tabs

TabContent的链接参考:OpenHarmony TabContent

通过查看链接参考我们知道可以通过TabContent的tabBar来实现自定义TabBar样式(CustomBuilder)

实现效果:

具体实现逻辑:

1、自定义样式

复制代码
@Builder
tabBuilder(index: number, name: string) {
   RelativeContainer() {
      Text(name)
         .id("textTab")
         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
         .fontSize(16)
         .fontWeight(this.currentIndex === index ? 8 : 4)
         .margin({ top: 17, bottom: 7 })
         .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
            middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
         })
      Text("5")
         .id("textDot")
         .textAlign(TextAlign.Center)
         .backgroundColor(Color.Red)
         .borderRadius(10)
         .fontSize(12)
         .fontColor(Color.White)
         .width(20)
         .height(20)
         .alignRules({
            left: { anchor: 'textTab', align: HorizontalAlign.End },
            center: { anchor: 'textTab', align: VerticalAlign.Center }
         })

      Divider()
         .id("dividerTab")
         .strokeWidth(this.strokeWidth)
         .color('#007DFF')
         .opacity(this.currentIndex === index ? 1 : 0)
         .alignRules({
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
            middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
         })
   }.width('100%')
}

2、完整代码:

复制代码
@Entry
@Component
struct Index {
   @State fontColor: string = '#111111'
   @State selectedFontColor: string = '#007DFF'
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
   @State strokeWidth: number = 3 //下划线的宽度

@Builder
tabBuilder(index: number, name: string) {
   RelativeContainer() {
      Text(name)
         .id("textTab")
         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
         .fontSize(16)
         .fontWeight(this.currentIndex === index ? 8 : 4)
         .margin({ top: 17, bottom: 7 })
         .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
            middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
         })
      Text("5")
         .id("textDot")
         .textAlign(TextAlign.Center)
         .backgroundColor(Color.Red)
         .borderRadius(10)
         .fontSize(12)
         .fontColor(Color.White)
         .width(20)
         .height(20)
         .alignRules({
            left: { anchor: 'textTab', align: HorizontalAlign.End },
            center: { anchor: 'textTab', align: VerticalAlign.Center }
         })

      Divider()
         .id("dividerTab")
         .strokeWidth(this.strokeWidth)
         .color('#007DFF')
         .opacity(this.currentIndex === index ? 1 : 0)
         .alignRules({
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
            middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
         })
   }.width('100%')
}

   build() {
      Column() {
         Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
            TabContent() {
               Column().width('100%').height('100%').backgroundColor('#00CB87')
            }.tabBar(this.tabBuilder(0, 'green'))

            TabContent() {
               Column().width('100%').height('100%').backgroundColor('#007DFF')
            }.tabBar(this.tabBuilder(1, 'blue'))

            TabContent() {
               Column().width('100%').height('100%').backgroundColor('#FFBF00')
            }.tabBar(this.tabBuilder(2, 'yellow'))

            TabContent() {
               Column().width('100%').height('100%').backgroundColor('#E67C92')
            }.tabBar(this.tabBuilder(3, 'pink'))
         }
         .vertical(false)
         .barMode(BarMode.Fixed)
         .barHeight(56)
         .animationDuration(400)
         .onChange((index: number) => {
            this.currentIndex = index
         })
         .width('100%')
         .height('100%')
         .backgroundColor('#F1F3F5')
      }.width('100%')
   }
}

总结:

上面的逻辑介绍是提供一种思路,根据这个思路我们可以自定义很多的TabBar的样式,来满足我们的业务需求,比如可以修改间距、颜色、大小、宽度、添加红点等。

相关推荐
爱笑的眼睛1116 分钟前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu7 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉7 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu7 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20009 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉9 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡13 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq952713 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹414 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos