HarmonyOS——Tabs简单使用

使用@Builder设置一个页面切换时导航栏显示高亮的效果。

`

@Entry
@Component
struct Demo_Tabs {
  @State barIndex: number = 0
  build() {
    Column(){
      Tabs({barPosition: BarPosition.End}){
        TabContent(){
          Text('A')
        }
        .tabBar(this.tabBarBuilder(0))
        TabContent(){
          Text('B')
        }
        .tabBar(this.tabBarBuilder(1))
        TabContent(){
          Text('C')
        }
        .tabBar(this.tabBarBuilder(2))
        TabContent(){
          Text('D')
        }
        .tabBar(this.tabBarBuilder(3))
      }
      .width('100%')
      .height('100%')
      .onChange((index: number)=>{
        this.barIndex = index
      })
      .barHeight(60)
      .barBackgroundColor(Color.Gray)
    }
    .width('100%')
    .height('100%')
  }
  @Builder
  tabBarBuilder(ind: number){
    Image(this.barIndex == ind ? $r(`app.media.ic_tabbar_icon_${ind}_selected`) : $r(`app.media.ic_tabbar_icon_${ind}`))
      .width(50)
  }

}

素材：

`