HarmonyOS tabs的下划线能改成黑色吗？

Question

我自定义的tabMainBuilder，tabs的下划线就不显示了，是要自己定义吗？有参考代码吗？我只想改下划线的颜色改成黑色

Answer 1

可以使用indicator属性设置color来更改下划线的颜色

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  private controller: TabsController = new TabsController()


  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Column()
            .width('100%').height('100%').backgroundColor('#00CB87')
        }

        .tabBar(
          SubTabBarStyle.of('pink')
            .indicator({
              //设置下划线与文字间距
              color:'red'
            })
            //设置字体颜色
            .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })

        )

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }
        .tabBar(
          SubTabBarStyle.of('pink')
            .indicator({
              //设置下划线与文字间距
            })
            .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })
        )

        TabContent() {
          Column()
            .width('100%').height('100%').backgroundColor('#FFBF00')
        }
        .tabBar(SubTabBarStyle.of('pink')
          .indicator({
            //设置下划线与文字间距
          })
          .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }
        .tabBar(SubTabBarStyle.of('pink')
          .indicator({
            //设置下划线与文字间距
          })
          .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }))
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(156)
      .animationDuration(400)
      .onChange((index: number) => {

      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .fadingEdge(true)
      .backgroundColor('#F1F3F5')

      Button('5455')
        .width(100)
        .height(60)

    }.width('100%')
  }
}

自定义需要您自己去手动加横线，通过对该属性去设置横线的显示或者隐藏，例如

@Entry
@Component
struct Drag2 {
  @State tabArray: Array<number> = [0, 1,2,3,4]
  @State focusIndex: number = 0
  @State pre: number = 0
  @State index: number = 0
  private controller: TabsController = new TabsController()
  @State test: boolean = false

  // 单独的页签
  @Builder Tab(tabName: string, tabItem: number, tabIndex: number) {
    Row({ space: 20 }) {
      Column(){
        Text(tabName)
          .fontSize(18)
        Line({width:50,height:2})
          .backgroundColor('red')
      }
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(120)
    .height(80)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
    .backgroundColor(tabIndex === this.focusIndex ? "#ffffffff" : "#ffb7b7b7")
  }
  build() {
    Column() {
      Column() {
        // 页签
        Row({ space: 7 }) {
          Scroll() {
            Row() {
              ForEach(this.tabArray, (item: number, index: number) => {
                this.Tab("页签 " + item, item, index)
              })
            }
            .justifyContent(FlexAlign.Start)
          }
          .align(Alignment.Start)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .width('90%')
          .backgroundColor("#ffb7b7b7")

        }
        .width('100%')
        .backgroundColor("#ffb7b7b7")
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            TabContent() {
              Text('我是页面 ' + item + " 的内容")
                .height(300)
                .width('100%')
                .fontSize(30)
            }
          })
        }
        .barHeight(0)
        .animationDuration(100)
        .onChange((index: number) => {
          console.log('foo change')
          this.focusIndex = index
        })
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height('100%')
  }
}