鸿蒙NEXT中如何实现导航栏

容器组件Tabs

当页面内容较多时，通常会使用Tabs组件进行分类展示，如上图所示

1.基本用法

@Entry
@Component
struct TabbarDemo {
  build() {
    Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('推荐') // 导航栏
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('发现') // 导航栏
    }
  }
}

默认的导航栏就有切换效果了，之后通过Tabs的属性可以进一步丰富他的功能：
·vertical可以控制导航栏为水平或垂直
·barPosition可以调整导航栏位置是开头还是结尾 ·scrollable控制是否开启滑动（导航栏的内容是否可以滑动不是导航栏）
·animationDuration设置动画时间单位毫秒

// BarPosition.Start 起始
// BarPosition.End 结尾
Tabs({ barPosition: BarPosition.End }) {
  // 内容
}
  .vertical(true)// 垂直导航 true / 水平false
  .scrollable(true) // 允许滑动 true / 不允许 false
  .animationDuration(0) // 切换动画的时间，毫秒

2.滚动导航栏

那么像这样的滚动导航栏怎么实现
可以通过 Tabs 组件的barMode属性即可调整 固定导航栏 或 滚动导航栏

Tabs(){
  // 内容
}
  .barMode(BarMode.Scrollable)// 滚动
  // .barMode(BarMode.Fixed)// 默认值固定

具体实现：

@Entry
@Component
struct Index {
titles:string [ ] = ['首页','关注','热门','军事','体育','八卦','数码','财经','美食','旅行']
build() {
  // 外层容器
  Tabs() {
    // 内容
    ForEach(this.titles,(title:string,index:number)=>{
      TabContent() {
        Text(title+'的内容')
          .fontSize(30)
      }
      .tabBar(title)
    })


  }
  .barMode(BarMode.Scrollable)
}
}

3.自定义tabBar

像上图TabBar放在底部的情况，一般会显示图形和文字，这样就需要自定义tabBar,就是在tarBar中使用自定义构建函数

  @Entry
@Component
struct Index {
// 1. 定义构建函数
@Builder
tabbarBuilder(title: string, icon: string, index: number) {
  if (index == 2) {
    Badge({
      value: title,
      position: { x: 24, y: -4 },
      style: {}
    }) {
      Image($r(icon))
        .width(50)
    }
  } else {
    Column({ space: 5 }) {
      if (index == 3) {
        Badge({
          value: '7',
          position: { x: 25, y: 0 },
          style: {}
        }) {
          Image($r(icon))
            .width(35)
        }
      } else {
        Image($r(icon))
          .width(35)
      }
      Text(title)
    }
  }
}

build() {
  Column() {
    Tabs() {
      TabContent() {

      }
      // 2. 使用自定义构建函数
      .tabBar(this.tabbarBuilder('首页', 'app.media.ic_tabbar_icon_0', 0))

      TabContent() {
      }
      .tabBar(this.tabbarBuilder('逛', 'app.media.ic_tabbar_icon_1', 1))

      TabContent() {
      }
      .tabBar(this.tabbarBuilder('上新', 'app.media.ic_share_sina', 2))

      TabContent() {
      }
      .tabBar(this.tabbarBuilder('购物车', 'app.media.ic_tabbar_icon_2', 3))

      TabContent() {
      }
      .tabBar(this.tabbarBuilder('我的', 'app.media.ic_tabbar_icon_3', 4))
    }
    .barPosition(BarPosition.End)
  }
  .height('100%')
  .width('100%')
}
}

4.Tabs组件的事件

当自定义TabBar时会发现高亮的切换效果没了，我们可以通过添加事件来切换，那我们就需要知道什么时候进行切换？

onChange(event: (index: number) => void)：这个事件是在tab页面切换后就会触发（就是只要页面变化就会触发）

onTabBarClick(event: (index: number) => void)：这个就是只能通过点击导航栏才能触发

所以onChange使用比较多

@Entry
@Component
struct Index {
  // 1.定义一个状态变量，用来存储当前用户选中的tabbar索引
  @State currentIndex: number = 0

  /*
   * 自定义构建函数创建出来的tabbar在做切换高亮功能的步骤：
   * 1. 定义一个状态变量，用来存储当前用户选中的tabbar索引
   * 2. 在调用自定义构建函数的时候，需要传入当前tabbar的索引(固定值)，同时要传入点亮的图片路径和正常的图片路径
   * 3. 在自定义构建函数中使用三元表达式来进行高亮功能的处理
   * */

  // 1. 定义构建函数
  @Builder
  tabbarBuilder(title: string, icon: string, selectedIcon: string, index: number) {
    Column({ space: 5 }) {
      // 2. 在自定义构建函数中使用三元表达式来进行高亮功能的处理
      Image(this.currentIndex == index ? $r(selectedIcon) : $r(icon))
        .width(35)
      Text(title)
        // 3.在自定义构建函数中使用三元表达式来进行高亮功能的处理
        .fontColor(this.currentIndex == index ? Color.Red : Color.Black)
    }
  }

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页')
            .fontSize(50)
        }
        // 2.在调用自定义构建函数的时候，需要传入当前tabbar的索引(固定值)，同时要传入点亮的图片路径和正常的图片路径
        .tabBar(this.tabbarBuilder('首页', 'app.media.ic_tabbar_icon_0', 'app.media.ic_tabbar_icon_0_selected', 0))

        TabContent() {
          Text('逛')
            .fontSize(50)
        }
        .tabBar(this.tabbarBuilder('逛', 'app.media.ic_tabbar_icon_1', 'app.media.ic_tabbar_icon_1_selected', 1))
      }
      .barPosition(BarPosition.End)
      .animationDuration(0)
      .onChange((index) => {
        this.currentIndex = index
      })
    }
    .height('100%')
    .width('100%')
  }
}