HarmonyOS 鸿蒙Next Tabs组件中tabBar导航区左右两边的黑条是什么？怎样才能隐藏

HarmonyOS 鸿蒙Next Tabs组件中tabBar导航区左右两边的黑条是什么？怎样才能隐藏

组件代码如下

@Preview({
  title: 'Tab'
})
@Component
export default struct TabComponent {
  tabInfo = ['Layout', 'Components', 'Router', 'Graphics', 'Animation', 'Interactive']
  private tabController: TabsController = new TabsController()
  @State private selectedIndex: number = 0

  build() {
    Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) {
      ForEach(this.tabInfo, (tabInfo: string, index: number) => {
        TabContent() {
          NavRouter() {
            Text(tabInfo)
              .fontSize(18)
            NavDestination() {
              Column() {
                Text(tabInfo + ' Detail Page')
                  .fontSize(12)
              }
              .height('100%')
              .justifyContent(FlexAlign.Center)
            }
            .title(tabInfo + ' Detail')
            .hideTitleBar(false)
            .mode(NavDestinationMode.STANDARD)
          }
        }
        .tabBar(this.tabBarBuilder(tabInfo, index))
        .tabIndex(index)
      }, (tabInfo: string) => tabInfo)
    }
    .barOverlap(false)
    .vertical(false)
    .fadingEdge(true)
    .scrollable(true)
    .barMode(BarMode.Scrollable)
    .onChange((index: number) => {
      this.selectedIndex = index
    })
  }

  @Builder
  tabBarBuilder(title: string, index: number) {
    Row() {
      Image($rawfile('number.png'))
        .width(20)
        .height(20)
        .margin({ right: 5 })
      Text(title)
        .fontColor(this.selectedIndex === index ? Color.Orange : Color.Black)
        .fontWeight(this.selectedIndex === index ? FontWeight.Bold : FontWeight.Regular)
    }
    .padding(20)
  }
}