前言
rc_concave_tabbar 是一个功能强大、样式精美的 HarmonyOS 底部导航栏组件库，提供凹陷圆形动画效果样式，适用于多种场景。本篇将介绍 rc_concave_tabbar 的使用方法以及其相关的设计理念。
组件特性
- 流畅动画：支持流畅的凹陷圆形切换动画效果
- 高度定制：支持自定义背景色、字体颜色、高度等多种样式配置
- 灵活配置：支持全局配置和单项配置，满足不同场景需求
- 简单易用：API 设计简洁，快速集成到 HarmonyOS 项目中
- 性能优化：动画流畅，性能表现优异
适用场景
- 电商类应用底部导航
- 社交类应用主页面切换
- 内容资讯类应用导航栏
- 工具类应用多功能入口
- 需要精美底部导航动效的各类应用
使用说明
安装组件
rc_concave_tabbar 已发布到 OpenHarmony 三方库中心仓库中，访问地址为：https://ohpm.openharmony.cn/#/cn/detail/rc_concave_tabbar
安装步骤
- 添加依赖
在项目根目录下执行以下命令：
ohpm install rc_concave_tabbar
- 基本使用
步骤一：引入相关依赖
在需要使用组件的页面文件中，导入必要的类型和组件：
import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
步骤二：创建菜单数据
定义状态变量和菜单配置数据：
// 当前选择的菜单
@State currentIndex: number = 0;
// 菜单数据
@State TabsMenu: TabMenusInterfaceIRequired[] = [
{ text: "首页", image: $r("app.media.index1"), selectImage: $r("app.media.index") },
{ text: "分类", image: $r("app.media.classify1"), selectImage: $r("app.media.classify") },
{ text: "发现", image: $r("app.media.find1"), selectImage: $r("app.media.find") },
{ text: "我的", image: $r("app.media.resumeReview"), selectImage: $r("app.media.resumeReview1") }
];
说明：
currentIndex：用于追踪当前选中的菜单索引TabsMenu：菜单配置数组，每个对象代表一个菜单项image：菜单项未选中时显示的图标资源selectImage：菜单项选中时显示的图标资源
步骤三：使用导航组件
在页面的 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')
}
代码说明：
tabsMenu：传入菜单配置数组selectIndex：使用$currentIndex进行双向绑定，实现索引同步tabsBgColor：设置导航栏背景颜色为白色tabHeight：设置导航栏高度为 60vptabsSelectBgColor：设置选中球的填充颜色tabsFontColor：设置未选中时的文字颜色tabsSelectFontColor：设置选中时的文字颜色
参数介绍
TabsConcaveCircle 组件参数
TabsConcaveCircle 是主要的导航栏组件，支持以下参数配置：
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
tabsMenu | TabMenusInterfaceIRequired[] | 是 | - | 导航菜单项数组，定义所有菜单项的配置 |
selectIndex | number | 是 | - | 当前选中的索引（使用 @Link 双向绑定） |
tabHeight | number | 否 | 60 | TabBar 高度（单位：vp） |
tabsBgColor | `Color | string | Resource` | 否 |
tabsSelectBgColor | `Color | string | Resource` | 否 |
tabsFontColor | `Color | string | Resource` | 否 |
tabsSelectFontColor | `Color | string | Resource` | 否 |
animateTime | number | 否 | 1000 | 动画执行时长（单位：毫秒） |
TabMenusInterfaceIRequired 菜单项配置
每个菜单项支持以下配置选项：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
text | `Resource | string` | 是 |
image | ResourceStr | 是 | 未选中时的图标资源路径 |
selectImage | ResourceStr | 否 | 选中时的图标资源路径（未设置时使用 image） |
tabsFontColor | `Color | string | Resource` |
tabsSelectFontColor | `Color | string | Resource` |
进阶使用
自定义单个菜单项颜色
可以为特定菜单项设置独立的字体颜色，该配置优先级高于全局配置：
@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' // 白色选中文字
})
注意事项
- 双向绑定：
selectIndex参数必须使用$符号进行双向绑定，确保索引状态实时同步 - 图标资源：确保所有引用的图标资源已正确添加到项目中，否则会导致显示异常
- 类型导入：必须导入
TabMenusInterfaceIRequired类型，否则 TypeScript 会报类型错误 - 颜色格式：颜色参数支持多种格式：
- Color 枚举：
Color.Black、Color.Blue等 - 十六进制字符串：
'#ffffff'、'#000000'等 - RGB/RGBA：
'rgb(255, 255, 255)'、'rgba(92, 187, 183, 1)'等 - 资源引用：
$r('app.color.primary')等
- Color 枚举：
- 性能优化：
- 避免频繁修改
TabsMenu数组，建议在组件初始化时一次性配置 - 图标资源大小应适中，避免使用过大的图片文件
- 避免频繁修改
总结
rc_concave_tabbar 是一款专为 HarmonyOS 设计的高质量底部导航栏组件，其独特的凹陷圆形动画效果为应用增添了现代感和交互趣味性。无论是开发电商、社交、资讯还是工具类应用，该组件都能为你的项目提供专业级的底部导航解决方案。
