跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
TypeScript大前端

HarmonyOS6 凹陷圆形底部导航组件 rc_concave_tabbar 实战

HarmonyOS6 凹陷圆形底部导航组件 rc_concave_tabbar 提供流畅动画与高度定制能力,适用于电商、社交及工具类应用。核心功能包括凹陷圆形切换动画、全局与单项样式配置、双向绑定索引同步。集成方式简单,仅需 ohpm 安装并导入组件。支持自定义背景色、字体颜色、高度及动画时长,满足多样化 UI 需求。使用时需注意双向绑定语法、图标资源完整性及类型导入规范,避免频繁修改菜单数组以保证性能。

乱七八糟发布于 2026/3/28更新于 2026/6/618 浏览
HarmonyOS6 凹陷圆形底部导航组件 rc_concave_tabbar 实战

前言

rc_concave_tabbar 是专为 HarmonyOS 设计的底部导航栏组件库,主打凹陷圆形动画效果。它支持高度定制和灵活配置,API 设计简洁,能快速集成到项目中。

组件特性
  • 流畅动画:支持凹陷圆形切换动画
  • 高度定制:可自定义背景色、字体颜色、高度等样式
  • 灵活配置:支持全局和单项配置
  • 简单易用:快速集成
  • 性能优化:动画流畅
适用场景

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

使用说明

安装组件

组件已发布到 OpenHarmony 三方库中心仓库。在项目根目录下执行以下命令进行安装:

ohpm install rc_concave_tabbar
引入依赖

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

import { TabMenusInterfaceIRequired, TabsConcaveCircle } from 'rc_concave_tabbar'
创建菜单数据

定义状态变量和菜单配置数据。这里使用 @State 管理当前选中的索引和菜单列表:

// 当前选择的菜单
@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(), : $r() },
  { : , : $r(), : $r() }
];
"app.media.find1"
selectImage
"app.media.find"
text
"我的"
image
"app.media.resumeReview"
selectImage
"app.media.resumeReview1"

注意 image 是未选中图标,selectImage 是选中图标。如果未设置 selectImage,组件会默认复用 image。

使用导航组件

在页面的 build() 方法中集成 TabsConcaveCircle 组件。通过双向绑定 selectIndex 实现索引同步:

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 组件参数
参数类型必填默认值说明
tabsMenuTabMenusInterfaceIRequired[]是-导航菜单项数组
selectIndexnumber是-当前选中的索引(需双向绑定)
tabHeightnumber否60TabBar 高度(单位:vp)
tabsBgColor`ColorstringResource`否
tabsSelectBgColor`ColorstringResource`否
tabsFontColor`ColorstringResource`否
tabsSelectFontColor`ColorstringResource`否
animateTimenumber否1000动画执行时长(毫秒)
TabMenusInterfaceIRequired 菜单项配置
参数类型必填说明
text`Resourcestring`是
imageResourceStr是未选中图标资源路径
selectImageResourceStr否选中图标资源路径
tabsFontColor`ColorstringResource`
tabsSelectFontColor`ColorstringResource`

进阶使用

自定义单个菜单项颜色

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

@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 枚举、十六进制字符串、RGB/RGBA 及资源引用。
  5. 性能优化:避免频繁修改 TabsMenu 数组,建议在组件初始化时一次性配置;图标资源大小应适中。

目录

  1. 前言
  2. 组件特性
  3. 适用场景
  4. 使用说明
  5. 安装组件
  6. 引入依赖
  7. 创建菜单数据
  8. 使用导航组件
  9. 参数介绍
  10. TabsConcaveCircle 组件参数
  11. TabMenusInterfaceIRequired 菜单项配置
  12. 进阶使用
  13. 自定义单个菜单项颜色
  14. 调整动画速度
  15. 自定义高度和颜色
  16. 注意事项
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Stable Diffusion 提示词使用指南
  • SpringBoot+Vue+MySQL Web 考编论坛平台设计与实现
  • 开源支付系统 roncoo-pay 架构与源码解析
  • VS Code 远程连接后 GitHub Copilot 无法使用修复方案
  • CISP 注册信息安全专业人员认证指南与职业价值解析
  • 趣味 AI 投降网页:三步体验地球统治仪式
  • Webhook 原理与 Langflow 实战集成指南
  • 五大 AI 工具一站式提效指南:豆包、即梦、剪映、飞书与扣子
  • Sora 是世界模拟器吗?通用世界模型综述解析
  • 医学影像分类器:基于深度学习的肺结节检测
  • 初学者如何选择编程语言和开发方向指南
  • C++ 搜索引擎项目实战:日志系统与 Server 端核心逻辑
  • RAG 四大模式解析:Naive、Advanced、Modular 与 Agentic
  • VS Code 远程连接服务器后 GitHub Copilot 无法使用
  • 二叉搜索树 C++ 实现:增删查改详解
  • 深度学习 YOLOv11 空域安全无人机检测识别系统
  • 青少年机器人编程系统化学习路径:从机械启蒙到人工智能
  • Llama API 集成 LlamaIndex 实现文本补全与结构化提取
  • Mac 下使用 Neo4j 与 py2neo 搭建知识图谱实战
  • 利用 DeepSeek 辅助儿童编程学习的实践路径

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online