视频网站程序深圳网络营销推广培训

概述

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; // 允许切换  })  

---

总结：

• 底部导航：核心功能，方便单手操作。
• 顶部导航：多分类快速切换。
• 侧边导航：横屏大屏专属。
• 自定义样式：图标+文字，颜值更高。
• 灵活控制：点击跳转、拦截权限，随心所欲。

用Tabs组件，就像给APP装了几个“智能抽屉”——用户点哪个开哪个，既不挤占空间，又操作流畅！ 🚀