文章目录 前言 组件特性 适用场景 使用说明 安装组件 安装步骤 步骤一：引入相关依赖 步骤二：创建菜单数据 步骤三：使用导航组件 运行效果 参数介绍 TabsConcaveCircle 组件参数 TabMenusInterfaceIRequired 菜单项配置 进阶使用 自定义单个菜单项颜色 调整动画速度 自定义高度和颜色 注意事项 总结 前言 rc_concave_tabbar 是一个功能强大…
rc_concave_tabbar 是一个功能强大、样式精美的 HarmonyOS 底部导航栏组件库，提供凹陷圆形动画效果样式，适用于多种场景。本篇将介绍 rc_concave_tabbar 的使用方法以及其相关的设计理念。
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 是主要的导航栏组件，支持以下参数配置：
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
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 | 动画执行时长（单位：毫秒） |
每个菜单项支持以下配置选项：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
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.Black、Color.Blue 等'#ffffff'、'#000000' 等'rgb(255, 255, 255)'、'rgba(92, 187, 183, 1)' 等$r('app.color.primary') 等TabsMenu 数组，建议在组件初始化时一次性配置rc_concave_tabbar 是一款专为 HarmonyOS 设计的高质量底部导航栏组件，其独特的凹陷圆形动画效果为应用增添了现代感和交互趣味性。
无论是开发电商、社交、资讯还是工具类应用，rc_concave_tabbar 都能为你的项目提供专业级的底部导航解决方案。
开始使用 rc_concave_tabbar，让你的 HarmonyOS 应用拥有更出色的导航体验！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online