HarmonyOS 6 凹陷圆形底部导航组件 rc_concave_tabbar 实战指南

在页面的 build() 方法中放入 TabsConcaveCircle 组件，并通过双向绑定将索引传递给组件。

build() {
  Column() {
    // 页面内容区域
    Column() {
      Text(`当前页面是 ${this.currentIndex} 页面`).fontColor('#ffffff').fontWeight(900)
    }.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).width('100%').layoutWeight(1)

    // 底部导航栏
    TabsConcaveCircle({
      tabsMenu: this.TabsMenu,
      selectIndex: $currentIndex,
      tabsBgColor: '#ffffff',
      tabHeight: 60,
      tabsSelectBgColor: 'rgba(92, 187, 183, 1)',
      tabsFontColor: Color.Black,
      tabsSelectFontColor: Color.Blue
    })
  }.height('100%').width('100%').backgroundColor('#333333')
}

注意 selectIndex 使用了 $ 符号进行双向绑定，这样用户点击时，组件会自动更新 currentIndex 的值，反之亦然。

参数详解

组件级参数

菜单项配置

每个菜单项对象支持独立覆盖全局样式，优先级更高：

• text: 显示文本
• image: 未选中图标资源
• selectImage: 选中图标资源（可选，不填则复用 image）
• tabsFontColor: 该项未选中时的字体颜色
• tabsSelectFontColor: 该项选中时的字体颜色

进阶定制

单个菜单项独立配色

如果某个 Tab 需要特殊颜色，直接在菜单项配置中指定即可：

{
  text: "首页",
  image: $r("app.media.index1"),
  selectImage: $r("app.media.index"),
  tabsFontColor: Color.Gray,
  tabsSelectFontColor: Color.Red
}

调整动画速度

通过 animateTime 控制动画快慢，单位毫秒：

TabsConcaveCircle({
  // ...其他参数
  animateTime: 800 // 设置为 800ms，动画更快
})

主题适配

根据应用整体色调调整导航栏风格：

TabsConcaveCircle({
  tabsMenu: this.TabsMenu,
  selectIndex: $currentIndex,
  tabHeight: 70,
  tabsBgColor: '#f5f5f5',
  tabsSelectBgColor: '#ff6b6b',
  tabsFontColor: '#666666',
  tabsSelectFontColor: '#ffffff'
})

注意事项

1. 双向绑定：selectIndex 必须使用 $ 前缀，否则无法实现状态同步。
2. 资源检查：确保引用的图标资源已正确添加到项目中，避免运行时显示异常。
3. 类型导入：务必导入 TabMenusInterfaceIRequired 类型，防止 TypeScript 报错。
4. 颜色格式：支持枚举（Color.Black）、十六进制（'#ffffff'）、RGB/RGBA 及资源引用（$r(...)）。
5. 性能建议：避免频繁修改 TabsMenu 数组，建议在初始化时一次性配置完成。

这套组件能显著提升应用的交互质感，配合凹陷圆形动效，让底部导航更具现代感。在实际开发中，只需关注菜单数据的构建和样式的微调，即可快速落地高质量导航栏。