HarmonyOS鸿蒙Next中如何在应用中实现自定义导航栏和TabBar？

在HarmonyOS Next中，自定义导航栏和TabBar主要通过ArkUI的声明式UI范式实现，核心是使用Navigation、Tabs、TabContent等组件并结合自定义装饰器。

1. 自定义导航栏 (Navigation) 导航栏通常由Navigation组件管理。要实现自定义样式，主要方式如下：

• 使用title属性与自定义构造器：Navigation的title属性可以接受一个自定义的@Builder方法，你可以在此方法中使用Row、Text、Image等基础组件自由组合标题栏的布局、文字样式、图标和背景。
• 隐藏默认标题栏并完全自定义：通过将Navigation的title属性设置为空字符串或一个极简元素，然后利用Navigation的content区域顶部放置一个自定义的Column或Row组件来模拟导航栏，实现完全的控制（包括背景色、高度、交互逻辑）。

2. 自定义TabBar Tabs组件用于实现TabBar，其bar属性是自定义的关键。

• @Builder装饰器定义TabBar：为Tabs的bar属性提供一个@Builder方法。在该方法中，使用TabBar组件（如HorizontalTabBar或VerticalTabBar）的content属性，内部用ForEach遍历生成每个Tab项。你可以完全控制每个Tab项的结构（图标、文字、间距、指示器）和样式（字体、颜色、背景）。
• 响应状态变化：在自定义@Builder中，可以通过TabContent的tabBar参数（如currentIndex）来获取当前选中状态，从而动态改变选中项与非选中项的样式（例如文字颜色、图标切换），实现交互反馈。

示例代码框架：

// 自定义导航栏标题
@Builder customTitleBuilder() {
  Row() {
    Image($r('app.media.logo'))
    Text('我的应用')
      .fontColor(Color.White)
  }
  .width('100%')
  .padding(10)
  .backgroundColor(Color.Blue)
}

// 自定义TabBar
@Builder customTabBarBuilder() {
  HorizontalTabBar() {
    ForEach(this.tabItems, (item: TabItem, index: number) => {
      TabBarItem() {
        Column() {
          Image(this.currentTabIndex === index ? item.selectedIcon : item.icon)
          Text(item.name)
            .fontColor(this.currentTabIndex === index ? Color.Blue : Color.Gray)
        }
      }
      .onClick(() => {
        // 切换Tab逻辑
        this.currentTabIndex = index;
      })
    })
  }
}

// 在页面中使用
@Entry
@Component
struct MyPage {
  private currentTabIndex: number = 0;

  build() {
    Navigation() {
      Tabs({ barPosition: BarPosition.End }) {
        // TabContent内容...
      }
      .bar(this.customTabBarBuilder())
    }
    .title(this.customTitleBuilder())
    .hideTitleBar(false) // 或根据需要控制
  }
}

关键点总结：

• 声明式UI：所有样式和布局均在build方法或其引用的@Builder方法中声明。
• 组合式设计：通过将基础组件（Row、Text、Image）和布局容器（Column、Stack）进行组合，来构建复杂的自定义界面。
• 状态驱动UI更新：使用@State等装饰器管理状态（如当前选中的Tab索引currentTabIndex），状态变化会自动触发相关UI的重新渲染，更新样式。

通过上述方法，你可以实现高度个性化的导航栏和TabBar，包括修改背景、图标、文字、布局结构以及交互状态样式，完全掌控应用的导航视觉体验。