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

相关推荐
周胡杰38 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少3 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端