1.快速上手了解Tabs组件

1. 先了解下Tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。
2. 其次再迅速搭建一个Tabs结构 并使用@Builder把导航栏内容抽取出来

3. 
   @Entry
   @Component
   struct Index {
   @Builder tabBarBuilder(title : string) {
       Text(title)
         .fontSize(20)
         .fontColor(Color.Grey)
     }
     build() {
       // Tabs 容器组件
       Tabs() {
         //子组件TabContent 里面写的是每个结构的样式
           TabContent(){
             Text('页面 1')
           }    //将自定义导航栏使用@Build封装 并且传递参数
           .tabBar(this.tabBarBuilder('页面1',))
         TabContent(){
           Text('页面 2')
         }
         .tabBar(this.tabBarBuilder('页面2',))
       }
       .height('100%')
       .width('100%')
     }
   }

   页面结构如下：

   

此时的TabBar导航栏可以有更多的样式 但是组件的默认高亮会消失

那么该如何实现高亮

2.实现高亮

1. 首先需要Tabs组件中的OnChange事件来记录当前所激活的Tab标识
2. 在组件内声明一个状态变量来存储每次激活的标识
3. OnChange事件 => 结构每发生改变/页面切换时所触发

4. @Entry
   @Component
   struct Index {
      @State Barindx : number  = 0
   
     @Builder tabBarBuilder(title : string) {
       Text(title)
         .fontSize(20)
         .fontColor(Color.Grey)//如果是高亮color.Black  正常状态color.Grey
     }
   
     build() {
       // Tabs 容器组件
       Tabs() {
         //子组件TabContent
           TabContent(){
             Text('页面 1')
           }    //将自定义导航栏使用@Build封装 并且传递参数
           .tabBar(this.tabBarBuilder('页面1',))
         TabContent(){
           Text('页面 2')
         }
         .tabBar(this.tabBarBuilder('页面2',))
       }
       .onChange((index)=>{
       this.Barindx = index
       }) 
       //结构每发生改变时会将OnChange中的参数index存储进状态变量Barindex里
       .height('100%')
       .width('100%')
     }
   }

5. 现在我们得到了一个随着数据改变而引起UI结构更新的数据，那么下一步就需要给我们先前抽取导航栏结构传入第二个number类型的参数
6. 使用三元运算符实现文字颜色高亮的切换 如下： 

@Entry
@Component
struct Index {
   @State Barindx : number  = 0

  @Builder tabBarBuilder(title : string,num:number) {
    Text(title)
      .fontSize(20)
   //使用三元运算符 => 被记录的状态变量里的值和传进去的标识相等吗？如果相等就是高亮 不相等就是正常状态
      .fontColor(this.barindex==index?Color.Black:Color.Grey)//如果是高亮color.Black  正常状态color.Grey
  }

  build() {
    // Tabs 容器组件
    Tabs() {
      //子组件TabContent
        TabContent(){
          Text('页面 1')
        }    //将自定义导航栏使用@Build封装 并且传递参数
        .tabBar(this.tabBarBuilder('页面1',0)) //tabBarBuilder组件里传递的两个参数 tittle：导航栏的文本 ，nums ： 赋予给这个导航栏的标识 => 
      TabContent(){
        Text('页面 2')
      }
      .tabBar(this.tabBarBuilder('页面2',1))
    }
    .onChange((index)=>{
    this.Barindx = index
    }) 
    //结构每发生改变时会将OnChange中的参数index存储进状态变量Barindex里
    .height('100%')
    .width('100%')
  }
}

3.拓展

关于Tabs组件有几个比较常用且有意思的属性 可以实现多种有趣的效果

• BarPosition  设置导航栏所在的位置 （默认设置是在交叉轴开始位置，可以通过这个属性设置成交叉轴结束位置）
• Tabs组件还可以设置 animation 动画效果 这个属性可以设置tabs里的每部分内容之间切换的动画时常，通常直接给0 提高观赏性

• scrollable 设置是否可以通过滑动页面进行页面切换 默认值true 支持滑动切换

• 更多有趣的属性参考文档

4.总结

1. 调用Tabs的事件OnChange获取回掉函数里的参数index 记录当前激活的标识
2. 声明一个与UI绑定的状态变量
3. 给封装的结构传入标识
4. 在文字颜色属性中使用三元运算符进行比较 状态变量里的数据是否和传入的参数index相等 如果相等就是高亮 如果不相等就是正常状态