鸿蒙实现自定义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的样式,来满足我们的业务需求,比如可以修改间距、颜色、大小、宽度、添加红点等。

相关推荐
遇到困难睡大觉哈哈6 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划9 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说9 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu11 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉11 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
kumalab14 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会15 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK18 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo20 小时前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉20 小时前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos