HarmonyOS:Tabs组件

一、概述

        Tabs组件用于管理多视图内容切换，通过TabBar（导航栏）和TabContent（内容区）提升空间利用率与用户体验。核心特性：

• 布局分类：顶部导航（默认）、底部导航、侧边导航

• 动态控制：滑动限制、缓存策略、自定义样式

• 交互联动：页签与内容同步切换

二、布局结构

1. 导航位置

类型	属性设置	适用场景
底部导航	barPosition: BarPosition.End	主导航（3-5个分类）
顶部导航	barPosition: BarPosition.Start	二级分类（如资讯标签）
侧边导航	vertical(true) + barPosition	横屏应用

关键约束：

• TabContent 不支持显式设置宽高，默认撑满父容器。

三、核心功能实现

1. 基础使用

Tabs() {
  // 首页
  TabContent() { 
    Text('首页内容').fontSize(30) 
  }.tabBar('首页')

  // 发现页
  TabContent() { 
    Text('发现内容').fontSize(30) 
  }.tabBar('发现')
}

2. 导航栏模式

模式	属性设置	效果
固定模式	.barMode(BarMode.Fixed)	均分宽度，不可滚动
滚动模式	.barMode(BarMode.Scrollable)	超屏时可滑动

// 固定底部导航（常用）
Tabs({ barPosition: BarPosition.End })
  .barMode(BarMode.Fixed)

// 可滚动顶部导航（分类多时）
Tabs({ barPosition: BarPosition.Start })
  .barMode(BarMode.Scrollable)

3. 自定义页签样式

@State currentIndex: number = 0

// 自定义 Builder
@Builder
tabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === index ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === index ? '#1698CE' : '#6B6B6B')
  }
}

// 应用自定义样式
TabContent() { ... }
  .tabBar(this.tabBuilder('首页', 0, $r('app.media.home_sel'), $r('app.media.home_nor')))

4. 页签与内容联动

Tabs({ index: this.currentIndex })
  .onSelected((index: number) => {
    this.currentIndex = index // 同步页签状态
  })

5. 缓存控制（API 19+）

Tabs()
  .cachedMaxCount(2, TabsCacheMode.CACHE_BOTH_SIDE) // 缓存当前页及两侧

缓存模式	效果
CACHE_BOTH_SIDE	缓存当前页 + 相邻两页
CACHE_LATEST_SWITCHED	缓存当前页 + 最近访问页

四、高级控制

1. 切换拦截

Tabs()
  .onContentWillChange((curr, next) => {
    return next !== 2 // 禁止切换到索引2的页面
  })

2. 控制器跳转

private tabsController: TabsController = new TabsController()

// 动态切换页签
Button('跳转')
  .onClick(() => {
    this.tabsController.changeIndex(3) // 跳转到"我的"页面
  })

五、最佳实践总结

1. 导航选择：

   • 主功能 → 底部固定导航

   • 多级分类 → 顶部滚动导航

   • 横屏场景 → 侧边导航

2. 性能优化：

   • 使用 cachedMaxCount 限制缓存数量

   • 非必要场景关闭动画 .animationDuration(0)

3. 交互一致性：

   • 自定义页签时需手动处理 currentIndex 同步

   • 复杂布局中禁用滑动 .scrollable(false)

示例完整代码：官方示例库

六、附录：布局示意图

1.底部导航

2.侧边导航