鸿蒙开发|带你深入了解容器组件Tabs鸿蒙开发|带你深入了解容器组件Tabs 内容介绍：本篇文章将分为以下几点来介绍Ta

鸿蒙开发|带你深入了解容器组件Tabs

内容介绍：本篇文章将分为以下几点来介绍`Tabs`组件：

基本用法
常用属性
设置导航栏滚动 TabBar
自定义TabBar

自我理解：

Tabs组件可以通过点击或滑动页签来实现页面内容的切换，在许多的APP页面中都有着它的身影。

下面是它的页面结构图：

下面开始具体介绍：

基本用法:

在使用Tabs组件时，必须明确Tabs组件仅支持子组件TabContent
一个TabContent对应一个tabBar,也就是一个页签对应一个视图内容

  
 Tabs(){
      TabContent(){
      //页面内容       
      }.tabBar()//页签
    }

常用属性：

**vertical:**调整导航栏为垂直或水平
**barPosition :**调整导航栏为开头或结尾
scrollable:允许页面滑动
**animationDuration:**设置页面滑动时间

下面我们展示这四个属性的作用

效果：导航栏为水平方向、导航栏在顶部、可以滑动页面、滑动时间为0

 Tabs() {
      TabContent() {
        Text("我的首页")
          .fontSize(50)
      }.tabBar('首页')
      TabContent() {
        Text("推荐")
          .fontSize(50)
      }.tabBar('推荐'))
    }.vertical(false) //true为垂直方向，false为水平方向
    .barPosition(BarPosition.Start) //Start为顶部，End为结尾
    .scrollable(true) //true为允许滑动，false为禁止滑动
    .animationDuration(0) //动画时时长

设置导航栏滚动:

barMode调整固定导航栏或切换导航栏

注意：barMode属性默认为Fixed，固定导航栏，它使所有的tabBar平均分配barWidth宽度，当页签很多时就会出现页签内容不显示的情况

下面我们来实现滚动效果：

  titles: string [] = ['首页', '关注', '热门', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']
  build() {
    Tabs() {
      ForEach(this.titles, (item: string) => {
        TabContent() {
          Text(item + "的内容")
            .fontSize(50)
        }.tabBar(item)
      })
    }.barMode(BarMode.Scrollable)//滚动效果
  }
}

自定义`TabBar`:

这部分内容是我们今天主要学习的内容，它涉及到自定义TabBar外观、自定义高亮

1.自定义`TabBar`

在实际使用App时，我们会发现，每个App的导航栏样式都是不同的，基本上图片与文字相结合的形式呈现的，所以我们需要自定义TabBar

那么该如何实现呢，第一步我们需要在**@Builder**修饰下构建函数，这里需要明白，@BUilder是一个自定构建函数的装饰器

第二步就是在函数中来构造我们需要的导航栏样式了。下面我们来实现上图的效果

第三步调用到Build中的TabBar中

首先我们先构造导航栏样式

  //导航栏
  @Builder
  myTabBar(img: Resource, text: string, index: number) {
    Column() {
      Image(img)
        .width(25)
      Text(text)
    }
  }

接着传入图片，与文字的数组，在用ForEach渲染,调用myTabBar

//导航栏
interface TabList {
  img: Resource
  text: string
}
@Entry
@Component
struct Index {
  list: TabList[] = [
    { img: $r('app.media.ic_tab_0'), text: "首页" },
    { img: $r('app.media.ic_tab_1'), text: "车友圈" },
    { img: $r('app.media.ic_tab_2'), text: "选车" },
    { img: $r('app.media.ic_tab_3'), text: "二手车" },
    { img: $r('app.media.ic_tab_4'), text: "服务" }
  ]
  build() {
    Tabs() {
        //渲染数组
      ForEach(this.list, (item: TabList) => {
        TabContent() {
        }.tabBar(this.myTabBar(item.img, item.text))
      })
    }
  }
  //导航栏
  @Builder
  myTabBar(img: Resource, text: string) {
    Column() {
      Image(img)
        .width(25)
      Text(text)
    }
  }
}

2.自定义高亮

首先我们必须要知道，当我们自定义TabBar后，高亮的切换效果就无法实现了，所以我们需要用触发事件来实现。

这里介绍两个触发事件：

1.onChange 点击切换和滑动切换都会触发

onTabBarClick 点击切换触发

这里我们用onChange来实现高亮切换效果：

第一步：记录Tab索引，我们需要设置一个@State装饰的状态变量，来保证变量的值发生改变时，UI也会随之刷新

第二步：加入onChange触发事件

**最后一步：**在利用三元判断，实现高亮切换效果

完整代码

//导航栏
interface TabList {
  img: Resource
  text: string
}
@Entry
@Component
struct Index {
  @State//索引
  current: number = 0
  list: TabList[] = [
    { img: $r('app.media.ic_tab_0'), text: "首页" },
    { img: $r('app.media.ic_tab_1'), text: "车友圈" },
    { img: $r('app.media.ic_tab_2'), text: "选车" },
    { img: $r('app.media.ic_tab_3'), text: "二手车" },
    { img: $r('app.media.ic_tab_4'), text: "服务" }
  ]
  build() {
    Tabs() {
      ForEach(this.list, (item: TabList, index) => {
        TabContent() {
          Text(item.text + "的内容")

        }.tabBar(this.myTabBar(item.img, item.text, index))
      })
    }.barPosition(BarPosition.End)
    //触发事件
    .onChange((index: number) => {
      this.current = index
    })
  }
  //导航栏
  @Builder
  myTabBar(img: Resource, text: string, index: number) {
    Column() {
      Image(img)
        .width(25)
      Text(text)
    }.backgroundColor(this.current == index ? "#ECB35E" : "#FFFFFF")//是否高亮
  }
}

鸿蒙开发|带你深入了解容器组件Tabs