鸿蒙之Tabs--详解

218 阅读2分钟

前言

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

Tabs-基本用法

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

image.png

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) // 动画持续时间
  }
}

image.png

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)// 滚动
  }
}

image.png

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)
    }
  }
}

image.png