鸿蒙之Tabs--详解

前言

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。[Tabs]组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

Tabs-基本用法

@Entry
@Component
struct Index{
  build() {
    Tabs(){
      TabContent(){
        Text('hello')
      }.tabBar('首页')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
    }
  }
}

Tabsr-常用属性

1. 垂直导航
2. 导航位置
3. 禁用滑动切换

通过 Tabs 的属性进行调整：

• vertical 属性即可调整导航为 水平 或 垂直
• barPosition 即可调整导航位置为 开头 或 结尾
• scrollable 即可调整是否允许 滑动切换
• animationDuration 设置动画时间 毫秒

@Entry
@Component
struct Index{
  build() {
    Tabs(){
      TabContent(){
        Text('hello')
      }.tabBar('首页')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
    }
    .barPosition(BarPosition.End) // 位置
    .vertical(true) // 纵向
    .scrollable(false) // 滑动切换
    .animationDuration(4000) // 动画持续时间
  }
}

Tabs-滚动导航栏

如果导航栏的内容较多，屏幕无法容纳时，可以将他设置为滚动

可以通过 Tabs 组件的 barMode 属性即可调整 固定导航栏 或 滚动导航栏

@Entry
@Component
struct Index{
  build() {
    Tabs(){
      TabContent(){
        Text('hello')
      }.tabBar('首页')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
      TabContent(){
        Text('goods')
      }.tabBar('商品')
    }
    .barMode(BarMode.Scrollable)// 滚动
  }
}

Tabs-自定义

TabBar 如果放在底部的话，一般会显示图形和文字， 甚至有特殊的图标， 如果要实现此类效果，就需要 自定义tabBar

@Entry
@Component
struct Index {
  build() {
    Tabs() {
      TabContent() {
        Text('首页')
      }
      .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_0'), '首页'))

      TabContent() {
        Text('我的')
      }
      .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_3'), '我的'))
    }
    .barPosition(BarPosition.End)
  }

  @Builder
  tabBarBuilder(img: ResourceStr, text: string) {
    Column() {
      Image(img)
        .width(30)
      Text(text)
    }
  }
}