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

最后在页面的 build() 方法中集成 TabsConcaveCircle 组件。注意 selectIndex 使用 $currentIndex 进行双向绑定，实现索引同步：

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')
}

运行项目后，即可看到精美的凹陷圆形动画效果。

参数介绍

TabsConcaveCircle 组件参数

TabMenusInterfaceIRequired 菜单项配置

每个菜单项支持以下配置选项：

进阶使用

自定义单个菜单项颜色

可以为特定菜单项设置独立的字体颜色，该配置优先级高于全局配置：

@State TabsMenu: TabMenusInterfaceIRequired[] = [
  { text: "首页", image: $r("app.media.index1"), selectImage: $r("app.media.index"), tabsFontColor: Color.Gray, tabsSelectFontColor: Color.Red },
  // ... 其他菜单项
];

调整动画速度

通过 animateTime 参数控制动画执行时长，单位为毫秒：

TabsConcaveCircle({
  tabsMenu: this.TabsMenu,
  selectIndex: $currentIndex,
  animateTime: 800 // 设置为 800 毫秒，动画更快
})

自定义高度和颜色

根据应用主题调整导航栏的视觉效果：

TabsConcaveCircle({
  tabsMenu: this.TabsMenu,
  selectIndex: $currentIndex,
  tabHeight: 70, // 增加高度
  tabsBgColor: '#f5f5f5', // 浅灰色背景
  tabsSelectBgColor: '#ff6b6b', // 红色选中球
  tabsFontColor: '#666666', // 灰色文字
  tabsSelectFontColor: '#ffffff' // 白色选中文字
})

注意事项

1. 双向绑定：selectIndex 参数必须使用 $ 符号进行双向绑定，确保索引状态实时同步。
2. 图标资源：确保所有引用的图标资源已正确添加到项目中，否则会导致显示异常。
3. 类型导入：必须导入 TabMenusInterfaceIRequired 类型，否则 TypeScript 会报类型错误。
4. 颜色格式：颜色参数支持多种格式：
   • Color 枚举：Color.Black、Color.Blue 等
   • 十六进制字符串：'#ffffff'、'#000000' 等
   • RGB/RGBA：'rgb(255, 255, 255)'、'rgba(92, 187, 183, 1)' 等
   • 资源引用：$r('app.color.primary') 等
5. 性能优化：避免频繁修改 TabsMenu 数组，建议在组件初始化时一次性配置；图标资源大小应适中，避免使用过大的图片文件。

总结

rc_concave_tabbar 是一款专为 HarmonyOS 设计的高质量底部导航栏组件，其独特的凹陷圆形动画效果为应用增添了现代感和交互趣味性。无论是开发电商、社交、资讯还是工具类应用，它都能为你的项目提供专业级的底部导航解决方案。