HarmonyOSNext_API16_Tabs组件

最新推荐文章于 2025-04-03 11:11:24 发布

余多多_zZ

最新推荐文章于 2025-04-03 11:11:24 发布

阅读量1.2k

点赞数 21

文章标签：学习 harmonyos 鸿蒙华为 ui Tabs

本文链接：https://blog.youkuaiyun.com/m0_71977266/article/details/146771075

版权

概述

Tabs组件就像手机里的“分类文件夹”——把一堆内容分成几个标签页，用户点哪个标签就显示对应的内容，既省屏幕空间，又方便快速切换。下面用最直白的语言解释它的用法和功能：

1. 基本结构：两个部分

TabContent（内容页）：每个标签对应的具体内容，比如“首页”页显示新闻，“购物车”页显示商品。
TabBar（导航栏）：底部/顶部/侧边的一排标签按钮，点击切换内容。

规则：

一个标签对应一个内容：就像每个抽屉贴一个标签，写清楚里面装什么。
内容页自动填满空间：不用手动设置宽高，Tabs会自动撑满剩余区域。

2. 导航栏位置——放哪最顺手？

底部导航（最常用）：
- 设置：barPosition: BarPosition.End
- 场景：微信底部“微信、通讯录、发现、我”——单手操作方便，适合核心功能切换。
顶部导航（分类多时用）：
- 设置：默认就是顶部（不用额外写代码）。
- 场景：今日头条顶部“推荐、热点、体育”——分类多，滑动切换快捷。
侧边导航（横屏专属）：
- 设置：vertical(true) + 调整barWidth和barHeight
- 场景：iPad横屏时左侧显示“设置、消息、帮助”——充分利用大屏空间。

3. 导航栏能不能滑动？

固定导航（标签少时用）：
- 特点：标签平均分布，不能滑动。
- 设置：.barMode(BarMode.Fixed)
- 场景：底部导航一般固定3-5个标签（如“首页、购物车、我的”）。
滚动导航（标签多时用）：
- 特点：标签超出屏幕时可左右滑动查看。
- 设置：.barMode(BarMode.Scrollable)
- 场景：顶部导航有十几个分类（如“手机、电脑、家电、服饰、美妆”）。

4. 禁止滑动切换

问题：页面里有多个Tabs（比如底部+顶部），滑动会冲突。

解决：设置.scrollable(false)，只能点击切换。

Tabs()  
  .scrollable(false) // 禁止滑动，只能点标签

5. 自定义导航栏样式

默认样式太普通？自己设计！

步骤：
1. 用@Builder画导航按钮：
  - 选中态：图标变彩色，文字加粗。
  - 未选中态：图标灰色，文字普通。
2. 绑定到tabBar属性：告诉Tabs用你的自定义按钮。
3. 联动内容切换：用@State变量记录当前选中的标签。

示例：底部导航带图标

@State currentIndex: number = 0; // 记录当前选中的标签索引  

// 自定义导航按钮  
@Builder  
tabBuilder(title: string, targetIndex: number, selectedImg: string, normalImg: string) {  
  Column() {  
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg) // 根据选中状态切换图标  
      .width(30)  
      .height(30)  
    Text(title)  
      .fontColor(this.currentIndex === targetIndex ? 'blue' : 'gray') // 选中文字变蓝  
  }  
}  

// 在Tabs中使用  
Tabs({ barPosition: BarPosition.End }) {  
  TabContent() { /* 首页内容 */ }  
    .tabBar(this.tabBuilder('首页', 0, 'home_selected.png', 'home_normal.png'))  
  TabContent() { /* 购物车内容 */ }  
    .tabBar(this.tabBuilder('购物车', 1, 'cart_selected.png', 'cart_normal.png'))  
}  
.onChange((index) => {  
  this.currentIndex = index; // 切换标签时更新选中状态  
})

6. 手动控制跳转页面

方法1：修改currentIndex变量，自动跳转。

Button('跳转到购物车').onClick(() => {  
  this.currentIndex = 1; // 直接改索引  
})

方法2：用TabsController控制跳转。

private controller: TabsController = new TabsController();  

Button('跳转到购物车').onClick(() => {  
  this.controller.changeIndex(1); // 通过控制器跳转  
})

7. 拦截页面切换（高级）

场景：用户未登录时，禁止进入“我的”页面。

Tabs()  
  .onContentWillChange((fromIndex, toIndex) => {  
    if (toIndex === 3 && !isLogin) { // 拦截跳转到第4个标签（我的）  
      alert('请先登录！');  
      return false; // 禁止切换  
    }  
    return true; // 允许切换  
  })