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

通过 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，说的是以下两种方式：

BottomTabBarStyleCustomBuilder

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

BottomTabBarStyle

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

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

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

@Entry@Componentstruct 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@Componentstruct Index {  /**   * 自定义导航栏   *    * @param icon 图标   * @param text 标题   */  @Builder TabBar(icon: Resource, text: string | ResourceStr) {  }  build() {  }}

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

@Entry@Componentstruct 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@Componentstruct 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 组件高度决定。