HarmonyOS鸿蒙Next中为什么我的TabBar第一项和第二项之间有条分割线？

HarmonyOS鸿蒙Next中为什么我的TabBar第一项和第二项之间有条分割线？ 如图，舒睡与报告之间有条黑竖线。

我写了个最小demo，src代码在附件中，不知道为啥上传不了整个项目的zip，明明只有8兆。依然能复现，我的两台手机Nova12和mate60都能复现。

tabbar里有5个时有一条黑竖线，tabbar里有6个时有两条。

cke_2779.png

cke_6652.png

import { HMRouter } from "@hadss/hmrouter"
import { ControlView } from "./ControlView"
import { ExploreView } from "./ExploreView"
import { ProfileView } from "./ProfileView"
import { ReportView } from "./ReportView"
import { SleepView } from "./SleepView"


@HMRouter({ pageUrl:'MainPage' })
@Entry
@ComponentV2
export struct MainPage {
  @Local selectedIndex: number = 0

  @Builder
  tabBarBuilder(image: Resource, title: string,index: number) {
    Column() {
      Image(image)
        .size({ width: 24, height: 24 })
        .fillColor(this.selectedIndex === index ? '#ff49D6F6' : '#FFFFFF')
      // .margin({ top: 8, bottom: 8 })

      Text(title)
        .fontSize(14)
        // .fontWeight(500)
        // .textAlign(TextAlign.Center)
        .fontColor(this.selectedIndex === index ? '#ff49D6F6' : '#FFFFFF')
      // .margin({ bottom: 28 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#cc1C1C1D')
  }

  build() {
    Tabs({ index: this.selectedIndex, barPosition: BarPosition.End }) {
      TabContent() {
        SleepView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '舒睡',0))

      TabContent() {
        ReportView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '报告', 1))

      TabContent() {
        ControlView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '智控',2))

      TabContent() {
        ExploreView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '探索',3))

      TabContent() {
        ProfileView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '我的' ,4))

      TabContent() {
        ProfileView()
      }
      .tabBar(this.tabBarBuilder($r('app.media.startIcon'), '我的' ,5))

    }
    .width('100%')
    .height('100%')
    .divider(null)
    .barWidth('100%')
    .barHeight(80) //设置导航栏高度
    .onChange((index: number) => {
      this.selectedIndex = index;
    })
    .scrollable(true)
  }


}

更多关于HarmonyOS鸿蒙Next中为什么我的TabBar第一项和第二项之间有条分割线？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

尊敬的开发者，您好！您的问题已受理，请您耐心等待，感谢您的理解与支持！

更多关于HarmonyOS鸿蒙Next中为什么我的TabBar第一项和第二项之间有条分割线？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，TabBar默认会在项之间显示分割线。这是系统组件的预设样式，用于视觉区分。若需移除，可通过自定义TabBar样式实现，例如调整分割线属性或使用自定义布局覆盖默认样式。

在您的代码中，TabBar项之间出现分割线是因为每个tabBarBuilder返回的Column组件都设置了背景色backgroundColor('#cc1C1C1D')。当多个TabContent并排显示时，这些背景色区域之间会形成视觉上的分割线效果。

解决方案是移除或调整背景色设置：

  1. 直接移除.backgroundColor('#cc1C1C1D')
  2. 或者改为透明背景：.backgroundColor(Color.Transparent)

修改后的tabBarBuilder应为：

@Builder
tabBarBuilder(image: Resource, title: string,index: number) {
  Column() {
    Image(image)
      .size({ width: 24, height: 24 })
      .fillColor(this.selectedIndex === index ? '#ff49D6F6' : '#FFFFFF')
    Text(title)
      .fontSize(14)
      .fontColor(this.selectedIndex === index ? '#ff49D6F6' : '#FFFFFF')
  }
  .width('100%')
  .height('100%')
  // 移除背景色设置
}

这样就能消除TabBar项之间的分割线，让导航栏呈现统一的视觉效果。

回到顶部