对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。

通过 TabContent 组件的 tabBar 属性可自定义导航栏样式。

declare class TabContentAttribute extends CommonMethod<TabContentAttribute> {
    /**
     * 自定义导航栏
     */
    tabBar(value: string | Resource | CustomBuilder | {
        icon?: string | Resource;
        text?: string | Resource;
    }): TabContentAttribute;
    /**
     * 自定义导航栏
     */
    tabBar(value: SubTabBarStyle | BottomTabBarStyle): TabContentAttribute;
}

一般我们说自定义 TabBar，说的是以下两种方式：

1. BottomTabBarStyle
2. CustomBuilder

这两种方式都是以底部导航栏为主。

BottomTabBarStyle

使用 BottomTabBarStyle 方式自定义导航栏需设置导航图标和标题。也就是下面的 icon 和 text。

declare class BottomTabBarStyle {
    constructor(icon: string | Resource, text: string | Resource);
}

下面，我们来写一个示例看看：

@Entry
@Component
struct Index {
  build() {
    Tabs() {
      TabContent() {
        Text("首页")
      }
      .tabBar(new BottomTabBarStyle($r("app.media.ic_home_fill"), "首页"))

      TabContent() {
        Text("商城")
      }
      .tabBar(new BottomTabBarStyle($r("app.media.ic_mall_fill"), "商城"))

      TabContent() {
        Text("我")
      }
      .tabBar(new BottomTabBarStyle($r("app.media.ic_user_fill"), "我"))
    }
    .barPosition(BarPosition.End)
  }
}

运行结果：

从运行结果来看，导航栏在底部，而且有图标和标题。点击对应的图标或标题切换对应的页面。

CustomBuilder

以构建函数创建自定义导航栏就比较自由一些。

首先，定义一个局部构建函数 TabBar，参数有两个，分别是图标 icon 和标题 text。

@Entry
@Component
struct Index {
  /**
   * 自定义导航栏
   * 
   * @param icon 图标
   * @param text 标题
   */
  @Builder TabBar(icon: Resource, text: string | ResourceStr) {

  }

  build() {

  }
}

然后，在构建函数内部使用 Column 垂直排列图标和标题。

@Entry
@Component
struct Index {
  /**
   * 自定义导航栏
   *
   * @param icon 图标
   * @param text 标题
   */
  @Builder TabBar(icon: Resource, text: string | ResourceStr) {
    Column({ space: 1 }) {
      Image(icon)
        .width(24)
        .height(24)
      Text(text)
        .fontSize(10)
        .lineHeight(14)
    }
  }

  build() {
    
  }
}

最后，在 Tabs 组件中使用刚刚自定义的导航栏。

@Entry
@Component
struct Index {
  /**
   * 自定义导航栏
   *
   * @param icon 图标
   * @param text 标题
   */
  @Builder TabBar(icon: Resource, text: string | ResourceStr) {
    Column({ space: 1 }) {
      Image(icon)
        .width(24)
        .height(24)
      Text(text)
        .fontSize(10)
        .lineHeight(14)
    }
  }

  build() {
    Tabs() {
      TabContent() {
        Text("首页")
      }
      .tabBar(this.TabBar($r("app.media.ic_home_fill"), "首页"))

      TabContent() {
        Text("商城")
      }
      .tabBar(this.TabBar($r("app.media.ic_mall_fill"), "商城"))

      TabContent() {
        Text("我")
      }
      .tabBar(this.TabBar($r("app.media.ic_user_fill"), "我"))
    }
    .barPosition(BarPosition.End)
  }
}

运行结果：

从运行结果来看，效果和上面的一样。

选择哪一种自定义方式大家根据实际需求决定。

说明：

• TabContent 组件不支持设置通用宽度属性，其宽度默认撑满 Tabs 父组件。
• TabContent 组件不支持设置通用高度属性，其高度由 Tabs 父组件高度与 TabBar 组件高度决定。