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

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)

更多关于HarmonyOS 鸿蒙Next tab项中使用了Badge,count设置成0时显示一条竖线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
应该是Badge的style中borderWidth的问题,count为0时,boder没有隐藏,内容隐藏了,手动设置borderWidth: 0,看看可不可以。

更多关于HarmonyOS 鸿蒙Next tab项中使用了Badge,count设置成0时显示一条竖线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,Next tab项使用Badge组件时,若将count属性设置为0而显示一条竖线,这通常是由于Badge组件的默认样式或自定义样式设置导致。HarmonyOS的Badge组件可能内置了某些显示逻辑,当count为0时,不是完全隐藏,而是以特定形式(如竖线)呈现,以保持UI元素的一致性或提示用户该位置存在可交互性。

要解决这个问题,可以尝试以下方法:

  1. 检查Badge样式:查看Badge组件的样式定义,确认是否有针对count为0时的特殊处理逻辑。如果有,修改样式以在count为0时完全隐藏Badge。

  2. 条件渲染:在代码中根据count的值决定是否渲染Badge组件。如果count为0,则不渲染Badge组件。

  3. 使用替代组件:如果Badge组件的默认行为无法满足需求,考虑使用其他自定义组件或布局来模拟Badge效果,并根据count值动态调整显示内容。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部