案例介绍

本教程将介绍如何在HarmonyOS中实现一个基础的嵌套标签页组件。嵌套标签页是一种复杂的导航结构，通过在一个标签页内部再包含一个标签页组件，可以实现多层级的内容分类。这种设计模式特别适用于需要展示层次化数据的场景，如电商应用的商品分类系统。

代码实现

@Entry
@Component
struct NestedTabContentExample {
  @State outerIndex: number = 0;
  @State innerIndices: number[] = [0, 0, 0, 0];
  
  private outerTabsController: TabsController = new TabsController();
  private innerTabsControllers: TabsController[] = [
    new TabsController(),
    new TabsController(),
    new TabsController(),
    new TabsController()
  ];
  
  // 外层标签页数据
  private outerCategories: Array<{
    title: string,
    icon: Resource
  }> = [
    { title: '女装', icon: $r('app.media.icon_women') },
    { title: '男装', icon: $r('app.media.icon_men') },
    { title: '电子', icon: $r('app.media.icon_electronics') },
    { title: '家居', icon: $r('app.media.icon_home') }
  ];
}

代码详解

1. 状态与控制器定义

@State outerIndex: number = 0;
@State innerIndices: number[] = [0, 0, 0, 0];

• outerIndex：使用@State装饰器定义外层标签页的当前选中索引
• innerIndices：数组存储每个外层标签页对应的内层标签页选中索引

private outerTabsController: TabsController = new TabsController();
private innerTabsControllers: TabsController[] = [
  new TabsController(),
  new TabsController(),
  new TabsController(),
  new TabsController()
];

• outerTabsController：控制外层标签页的切换和状态
• innerTabsControllers：数组存储每个外层标签页对应的内层标签页控制器

2. 数据结构设计

private outerCategories: Array<{
  title: string,
  icon: Resource
}> = [
  { title: '女装', icon: $r('app.media.icon_women') },
  { title: '男装', icon: $r('app.media.icon_men') },
  { title: '电子', icon: $r('app.media.icon_electronics') },
  { title: '家居', icon: $r('app.media.icon_home') }
];

外层标签页数据结构包含：

• title：标签页标题
• icon：标签页图标资源

这种数据结构设计使得标签页的内容可以灵活配置和扩展。

总结

本教程介绍了HarmonyOS嵌套标签页的基础实现，包括：

1. 使用@State装饰器管理标签页状态
2. 通过TabsController控制标签页切换
3. 设计合理的数据结构支持标签页内容

这些基础实现为构建复杂的嵌套标签页界面奠定了基础，后续可以在此基础上添加更多功能和交互效果。