HarmonyOS6 底部导航栏组件 rc_concave_tabbar 使用指南

文章目录

• 前言
  • 组件特性
  • 适用场景
• 使用说明
  • 安装组件
    • 安装步骤
    • 步骤一：引入相关依赖
    • 步骤二：创建菜单数据
    • 步骤三：使用导航组件
  • 运行效果
• 参数介绍
  • TabsConcaveCircle 组件参数
  • TabMenusInterfaceIRequired 菜单项配置
• 进阶使用
  • 自定义单个菜单项颜色
  • 调整动画速度
  • 自定义高度和颜色
• 注意事项
• 总结

前言

rc_concave_tabbar 是一个功能强大、样式精美的 HarmonyOS 底部导航栏组件库，提供凹陷圆形动画效果样式，适用于多种场景。本篇将介绍 rc_concave_tabbar 的使用方法以及其相关的设计理念。

组件特性

• 流畅动画：支持流畅的凹陷圆形切换动画效果
• 高度定制：支持自定义背景色、字体颜色、高度等多种样式配置
• 灵活配置：支持全局配置和单项配置，满足不同场景需求
• 简单易用：API 设计简洁，快速集成到 HarmonyOS 项目中
• 性能优化：动画流畅，性能表现优异

适用场景

• 电商类应用底部导航
• 社交类应用主页面切换
• 内容资讯类应用导航栏
• 工具类应用多功能入口
• 需要精美底部导航动效的各类应用

使用说明

安装组件

rc_concave_tabbar 已发布到 OpenHarmony 三方库中心仓库中，访问地址为：https://ohpm.openharmony.cn/#/cn/detail/rc_concave_tabbar

安装步骤

1. 添加依赖

在项目根目录下执行以下命令：

 ohpm install rc_concave_tabbar 

2. 基本使用

步骤一：引入相关依赖

在需要使用组件的页面文件中，导入必要的类型和组件：

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：设置导航栏高度为 60vp
• tabsSelectBgColor：设置选中球的填充颜色
• tabsFontColor：设置未选中时的文字颜色
• tabsSelectFontColor：设置选中时的文字颜色

运行效果

完成以上配置后，运行项目即可看到精美的凹陷圆形动画效果：

参数介绍

TabsConcaveCircle 组件参数

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 设计的高质量底部导航栏组件，其独特的凹陷圆形动画效果为应用增添了现代感和交互趣味性。
无论是开发电商、社交、资讯还是工具类应用，rc_concave_tabbar 都能为你的项目提供专业级的底部导航解决方案。
开始使用 rc_concave_tabbar，让你的 HarmonyOS 应用拥有更出色的导航体验！