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

前言：

DevEco Studio版本：4.0.0.600
Tabs的链接参考：OpenHarmony Tabs
TabContent的链接参考：OpenHarmony TabContent
通过查看链接参考我们知道可以通过TabContent的tabBar来实现自定义TabBar样式（CustomBuilder）

实现效果：

具体实现逻辑：

1、自定义样式

1. @Builder
2. tabBuilder(index: number, name: string) {
3.    RelativeContainer() {
4.       Text(name)
5.          .id("textTab")
6.          .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
7.          .fontSize(16)
8.          .fontWeight(this.currentIndex === index ? 8 : 4)
9.          .margin({ top: 17, bottom: 7 })
10.          .alignRules({
11.             center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
12.             middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
13.          })
14.       Text("5")
15.          .id("textDot")
16.          .textAlign(TextAlign.Center)
17.          .backgroundColor(Color.Red)
18.          .borderRadius(10)
19.          .fontSize(12)
20.          .fontColor(Color.White)
21.          .width(20)
22.          .height(20)
23.          .alignRules({
24.             left: { anchor: 'textTab', align: HorizontalAlign.End },
25.             center: { anchor: 'textTab', align: VerticalAlign.Center }
26.          })
28.       Divider()
29.          .id("dividerTab")
30.          .strokeWidth(this.strokeWidth)
31.          .color('#007DFF')
32.          .opacity(this.currentIndex === index ? 1 : 0)
33.          .alignRules({
34.             bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
35.             middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
36.          })
37.    }.width('100%')
38. }

复制代码

2、完整代码：

1. @Entry@Componentstruct Index {   @State fontColor: string = '#111111'   @State selectedFontColor: string = '#007DFF'   @State currentIndex: number = 0   private controller: TabsController = new TabsController()   @State strokeWidth: number = 3 //下划线的宽度@Builder
2. tabBuilder(index: number, name: string) {
3.    RelativeContainer() {
4.       Text(name)
5.          .id("textTab")
6.          .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
7.          .fontSize(16)
8.          .fontWeight(this.currentIndex === index ? 8 : 4)
9.          .margin({ top: 17, bottom: 7 })
10.          .alignRules({
11.             center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中
12.             middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
13.          })
14.       Text("5")
15.          .id("textDot")
16.          .textAlign(TextAlign.Center)
17.          .backgroundColor(Color.Red)
18.          .borderRadius(10)
19.          .fontSize(12)
20.          .fontColor(Color.White)
21.          .width(20)
22.          .height(20)
23.          .alignRules({
24.             left: { anchor: 'textTab', align: HorizontalAlign.End },
25.             center: { anchor: 'textTab', align: VerticalAlign.Center }
26.          })
28.       Divider()
29.          .id("dividerTab")
30.          .strokeWidth(this.strokeWidth)
31.          .color('#007DFF')
32.          .opacity(this.currentIndex === index ? 1 : 0)
33.          .alignRules({
34.             bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中
35.             middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中
36.          })
37.    }.width('100%')
38. }   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的样式，来满足我们的业务需求，比如可以修改间距、颜色、巨细、宽度、添加红点等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。