鸿蒙容器组件Tabs

HarmonyOS——容器布局

容器组件Tabs

概念：Tabs组件，又称为标签页组件，是一种常见的界面元素，它允许用户通过一系列可切换的标签来浏览不同的内容。每个标签对应一个内容区域，用户点击不同的标签可以在这些内容区域之间进行切换。

例如：

Tabs的基本用法

@Entry

@Component
​
// Tabs的基本用法
​
struct Tabs_demo1 {
​
  build() {
    Tabs(){
      TabContent(){
        Text('首页内容')
      }
      .tabBar('首页')  //配置导航
​
      TabContent(){
        Text('推荐内容')
      }
      .tabBar('推荐')
​
      TabContent(){
        Text('发现内容')
      }
      .tabBar('发现')
​
      TabContent(){
        Text('我的内容')
      }
      .tabBar('我的')
    }
  }
}

Tabs常用属性

barPosition ：调整位置 开头或者结尾

vertical ： 调整导航 水平 或 滑动scrollable

scrollable： 是否允许滑动

animationDuration: 切换动画的事件

@Entry
@Component
​
  //常见属性
​
struct Tabs_demo2 {
​
  build() {
    //设置位置在下方
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('首页内容')
      }
      .tabBar('首页')
​
      TabContent(){
        Text('推荐内容')
      }
      .tabBar('推荐')
​
      TabContent(){
        Text('发现内容')
      }
      .tabBar('发现')
​
      TabContent(){
        Text('我的内容')
      }
      .tabBar('我的')
    }
    .vertical(false) //水平
    .scrollable(false) //手势不可滑动
    .animationDuration(3000)  //滑动事件为3秒
  }
}

例如：

barPosition:BarPosition.End  .vertical(false)

barPosition:BarPosition.Start   .vertical(true)

滚动导航栏

当标签页过多时，可通过.barMode属性设置导航栏的滑动

@Entry
@Component
​
//滚动导航栏
​
struct Tabs_demo3 {
​
  title:string[]=['首页','关注','热门','军事','体育','八卦','数码','财经','美食','旅行']
  build() {
    Tabs(){
      ForEach(
        this.title,(item:string,index)=>{
          TabContent(){
            Text(`${item}内容`)
          }
          .tabBar(`${item}`)
      }
      )
    }.barMode(BarMode.Scrollable)
  }
}

自定义导航栏

TabBar 在底部，一般会显示 图形 和 文字，甚至有 特殊的图标

自定义模板：

Tabs() {
TabContent() {
// 内容略
 }
.tabBar(this.tabBarBuilder())
}
@Builder
tabBarBuilder() {
// 自定义的Tabbar结构
​

配合onChange（）监听导航栏的索引，可以实现高亮切换

@Entry
@Component
​
//自定义TabBar
​
struct Tabs_demo4 {
  @State selectedIndex:number =0
  @Builder
  myBuildBar(index:number,title:string,img?:ResourceStr,selectImg?:ResourceStr){
    Column(){
      Image(index==this.selectedIndex? selectImg:img)
        .width(30)
        .fillColor(Color.Orange)
      if(index===this.selectedIndex){
        Text(title)
          .fontColor(Color.Orange)
      }
      else {
        Text(title)
      }
​
​
    }
  }
​
​
  build() {
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('购物')
      }.tabBar(this.myBuildBar(0,'购物', $r('app.media.ic_tabbar_icon_2'),$r('app.media.ic_tabbar_icon_2_selected')))
​
      TabContent(){
        Text('我的')
      }.tabBar(this.myBuildBar(1,'我的',$r('app.media.ic_tabbar_icon_3'),$r('app.media.ic_tabbar_icon_3_selected')))
​
    }
    .onChange((index:number)=>{
        this.selectedIndex=index
    })
​
  }
}

Tabs的嵌套使用

Tabs内可以嵌套多个Tabs,如开头的B站布局

@Entry
@Component
​
  //常见属性
​
struct Tabs_demo5 {
  title:string[]=['直播','推荐','热门','动画','影视','新征程','军事','体育','八卦','数码','财经','美食','旅行']
  build() {
    //设置位置在下方
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Tabs(){
          ForEach(
            this.title,(item:string,index)=>{
            TabContent(){
              Text(`${item}内容`)
            }
            .tabBar(`${item}`)
          }
          )
        }.barMode(BarMode.Scrollable)
​
      }
      .tabBar('首页')
​
      TabContent(){
        Text('动态内容')
      }
      .tabBar('动态')
​
      TabContent(){
        Text('会员购内容')
      }
      .tabBar('会员购')
​
      TabContent(){
        Text('我的内容')
      }
      .tabBar('我的')
    }
​
    .scrollable(false) //手势不可滑动
    .animationDuration(3000)  //滑动事件为3秒
  }
}

总结

Tabs是开发的常用组件，相比router路由页面跳转，Tabs提高了页面切换的简洁性，提高了开发效率，降低了代码冗余