鸿蒙ArkTS 自定义底部导航栏（Tabs+@Builder 极简实现）

前端技术

96人浏览 · 2026-05-05 17:42:13

前端技术 · 2026-05-05 17:42:13 发布

1. 整体架构

采用鸿蒙原生Tabs + TabContent组件实现底部导航，Tabs作为导航容器，TabContent承载每个页面内容，通过配置将导航栏固定在页面底部。

2. 状态管理

使用@State装饰器定义currentIndex，记录当前选中的Tab索引；Tabs的onChange事件监听切换动作，实时更新索引值，驱动UI状态刷新。

3. 自定义Tab样式

通过@Builder装饰器封装通用导航栏构建函数，接收索引、标题、默认图标、选中图标四个参数，通过三目运算符判断当前索引是否为选中态，自动切换图标和文字颜色，实现统一的导航栏样式。

4. 关键配置

barPosition(BarPosition.End)：将导航栏固定在底部
scrollable(false)：禁止页面滑动切换，贴合常规App交互
固定导航栏高度、设置背景色，保证UI规整

完整精简代码

@Entry
@Component
struct BarCustomPage {
  @State currentIndex: number = 0;

  build() {
    Tabs() {
      TabContent() {
        Text('首页')
      }.tabBar(this.barBuilder(0, '主页', $r('app.media.icon_home'), $r('app.media.icon_home_selected')))

      TabContent() {
        Text('消息')
      }.tabBar(this.barBuilder(1, '消息', $r('app.media.icon_message'), $r('app.media.icon_message_selected')))

      TabContent() {
        Text('我的')
      }.tabBar(this.barBuilder(2, '我的', $r('app.media.icon_mine'), $r('app.media.icon_mine_selected')))
    }
    .barPosition(BarPosition.End)
    .scrollable(false)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
    .backgroundColor('#FFFFFF')
    .width('100%')
  }

  @Builder
  barBuilder(index: number, title: string, icon: Resource, iconSelected: Resource) {
    Column() {
      Image(this.currentIndex === index ? iconSelected : icon)
        .width(25)
        .height(25)
      Text(title)
        .fontSize(12)
        .fontColor(this.currentIndex === index ? '#0491d1' : '#8a8a8a')
        .fontWeight(FontWeight.Medium)
    }
    .justifyContent(FlexAlign.Center)
    .height(56)
  }
}