HarmonyOS鸿蒙Next中tab导航栏下划线

HarmonyOS鸿蒙Next中tab导航栏下划线 tab导航栏下划线怎样自定义

4 回复

可以使用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%')
  }
}

更多关于HarmonyOS鸿蒙Next中tab导航栏下划线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


tab导航栏下划线,可通过通过 indicator属性设置下划线样式

.tabBar(
 SubTabBarStyle.of('页签名称')
     .indicator({
        color: 'transparent', // 下划线颜色,设置透明就没有下划线
           height: 0, // 下划线高度
              borderRadius: 4      // 圆角半径    }))

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-builder-0000001524176981-V2

HarmonyOS Next中Tab导航栏下划线通过TabBar组件实现，可在TabContent内使用indicator属性自定义样式。支持设置下划线颜色、宽度、高度及圆角，通过ShapeDrawable或PixelMap定义形状。开发者可在布局文件中配置indicator属性，或使用ArkTS的TabBarStyle接口动态调整下划线位置与动画效果。系统默认提供滑动切换时的过渡动画，下划线会跟随Tab项自动平移。

在HarmonyOS Next中，可以通过Tab组件的indicator属性自定义导航栏下划线样式。具体实现如下：

  1. 使用indicator属性：

    TabBuilder()
  .indicator({
    // 设置下划线颜色
    color: Color.Blue,
    // 设置下划线高度
    height: 4,
    // 设置下划线宽度（可选）
    width: 20,
    // 设置圆角（可选）
    borderRadius: 2
  })

  2. 完整示例：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct TabExample {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Text('页面1')
        }.tabBar(this.createTabBar('选项1', 0))

        TabContent() {
          Text('页面2')
        }.tabBar(this.createTabBar('选项2', 1))
      }
      .indicator({
        color: '#007DFF',
        height: 4,
        width: 20,
        borderRadius: 2
      })
    }
  }

  @Builder createTabBar(text: string, index: number) {
    Column() {
      Text(text)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#182431')
    }
  }
}

  3. 主要配置参数：

    • color：下划线颜色
    • height：下划线高度
    • width：下划线宽度（默认与tab等宽）
    • borderRadius：圆角半径

通过调整这些参数即可实现不同样式的下划线效果，包括颜色、粗细、宽度和形状等自定义需求。

回到顶部