HarmonyOS 鸿蒙Next tab项中使用了Badge，count设置成0时显示一条竖线

@State currentIndex: number = 0
private tabsController: TabsController = new TabsController();
@State bottomMargin : number = 0;
@State messageCount:number = 0 ;

@Builder
tabBuilder(title:Resource,index:number,selectedImg: Resource, normalImg: Resource) {
Column() {
Badge({
count:index == 2 ? this.messageCount : 0,
style: {},
position: BadgePosition.RightTop,
}){
Image(this.currentIndex === index ? selectedImg : normalImg)
.width($r(‘app.float.mainPage_baseTab_size’))
.height($r(‘app.float.mainPage_baseTab_size’))
.objectFit(ImageFit.Contain)
}.width($r(‘app.float.view_30’))
Text(title)
.margin({ top: $r(‘app.float.mainPage_baseTab_top’) })
.fontSize($r(‘app.float.tab_text_font_size’))
.fontColor(this.currentIndex === index ? $r(‘app.color.tab_active_color’) : $r(‘app.color.tab_normal_color’))
}
.justifyContent(FlexAlign.Center)
.height($r(‘app.float.mainPage_barHeight’))
.width(‘100%’)
.onClick(() => {
this.currentIndex = index;
this.tabsController.changeIndex(this.currentIndex);
})
}
build() {
Tabs({
barPosition: BarPosition.End,
controller: this.tabsController,
index:this.currentIndex
}) {
TabContent() {
HomePage() ;
}
.backgroundColor(Color.White)
.tabBar(this.tabBuilder($r(‘app.string.menu_home’), 0, $r(‘app.media.menu_home_active’), $r(‘app.media.menu_home_normal’)))
TabContent() {
ClassPage();
}
.backgroundColor(Color.White)
.tabBar(this.tabBuilder($r(‘app.string.menu_class’), 1, $r(‘app.media.menu_class_active’), $r(‘app.media.menu_class_normal’)))
TabContent() {
MinePage({messageCount:this.messageCount}) ;
}
.backgroundColor(Color.White)
.tabBar(this.tabBuilder($r(‘app.string.menu_mine’), 2, $r(‘app.media.menu_mine_active’), $r(‘app.media.menu_mine_normal’)))
.layoutWeight(1)
}
.width(‘100%’)
.backgroundColor($r(‘app.color.tab_color’))
.barHeight($r(‘app.float.mainPage_barHeight’))
.scrollable(false)