TabBar导航栏组件是每个App中必不可少的功能，下面介绍一下Tabs组件的用法：

interface TabBar{
  title:string,
  icon:string
}

@Entry
@Component
struct Tabsdemo{
  //准备状态, 存储激活的索引
  @State selectedIndex:number = 0
  titles: string[] = ['首页','关注','热门','军事']
  tabBar: TabBar[] = [
    { title:'首页', icon:'app.media.shouye' },
    { title:'推荐', icon:'app.media.tuijian' },
    { title:'购物车', icon:'app.media.gouwuche' },
    { title:'我的', icon:'app.media.wode' },
  ]
  @Builder
   myBuilder(itemIndex:number,title:string,img:string){
     Column(){
       Image($r(img)).width(30).fillColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
       Text(title)
         .fontColor(itemIndex == this.selectedIndex ? Color.Red : Color.Black)
     }
   }
  build() {
       Tabs({barPosition: BarPosition.End}){
          ForEach(this.tabBar,(item:TabBar,index)=>{
             TabContent(){
                Text(`${item.title}内容`)  //有且只能一个子组件
             }
             .tabBar(this.myBuilder(index,item.title,item.icon))
          })
       }
       .vertical(false)  //false水平导航,true垂直导航
       .scrollable(false) //是否开启手势滑动
       .animationDuration(0) //点击滑动的动画时间
       .barMode(BarMode.Fixed)
       .onChange((index:number)=>{
         this.selectedIndex = index;
       })
   }
}

上面是Tabs组件的基本用法，包括其效果图，其中实现了自定义TabBar，下面介绍各部分代码的作用：

1、核心组件Tabs，导航栏的最外层组件，然后Tabs组件里面需要有一系列TabContent子组件，导航栏有多少个功能就会有多少个TabContent()组件，每个TabContent组件就是一个页面，需要注意的是：TabContent里面只能有一个子组件，这里通过遍历一个数组来生成多个TabContent组件

2、vertical()：是否开启水平导航，false为水平导航，true为垂直导航

3、scrollable()：是否允许手势滑动，false为关闭，true为开启

4、animationDuration(0)：点击页面切换的动画时间

5、barMode(BarMode.Fixed)：是否固定导航栏（Fixed）还是滚动导航栏（Scrollable），

6、barPosition：导航栏的位置：开始（end）还是末尾（start）

7、tabBar()传递自定义的TabBar，接受一个自定义的导航栏内容myBuilder，myBuilder里面封装了一个包含图标和标题的导航栏内容，通过接收的参数动态生成不同内容。其中的itemIndex参数是用来实现高亮效果，也就是突出显示当前所在的导航栏，这里通过onChange()接听到当前页面的索引，然后赋值给变量selectedIndex，当itemIndex和selectedIndex相同时改变图标和文字颜色为红色，达到不同的效果。

以上便是Tabs组件的使用，如果有问题，欢迎在评论区指出！！！