208.HarmonyOS NEXT系列教程之 CustomDrawTabbarComponent组件实现解析

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

HarmonyOS NEXT系列教程之 CustomDrawTabbarComponent组件实现解析

本文将详细解析CustomDrawTabbarComponent组件的实现，这是一个自定义的TabBar容器组件，展示了如何集成和使用TabsConcaveCircle等自定义导航组件。

效果演示

1. 组件概述

/**
 * 功能描述: 通过canvas，clipShape，radialGradient实现自定义TabBar选择时凸起点交界处的圆滑过渡动效以及扩展了一个凹陷选择时不遮挡原本内容的功能。
 *
 * 推荐场景: 自定义TabBar页签需要实现一圈圆弧外轮廓或者凹陷轮廓，点击TabBar页签之后需要改变图标显示，并有平移滑动切换页签动效的场景。
 */

功能特点：

1. 使用Canvas实现自定义绘制
2. 支持凸起和凹陷两种样式
3. 提供平滑的过渡动画
4. 支持图标状态切换

2. 数据结构定义

@Component
export struct CustomDrawTabbarComponent {
    @State currentIndex: number = 0;
    @State TabsMenu: TabMenusInterfaceIRequired[] = [
        {
            text: $r("app.string.custom_tab_home"),
            image: $r("app.media.tab_home"),
            selectImage: $r("app.media.tab_community")
        },
        {
            text: $r("app.string.custom_tab_friend"),
            image: $r("app.media.tab_cart"),
            selectImage: $r("app.media.tab_community")
        },
        // ... 其他菜单项
    ];

数据结构说明：

1. 状态管理：

   • currentIndex: 当前选中的标签索引
   • TabsMenu: 菜单项配置数组

2. 菜单项结构：

   • text: 显示文本（使用资源引用）
   • image: 默认图标
   • selectImage: 选中状态图标

3. 界面构建实现

build() {
    Column() {
        Divider()
            .margin(30)
        TabsConcaveCircle({
            tabsMenu: this.TabsMenu,
            selectIndex: this.currentIndex,
        });
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
    .linearGradient({
        direction: GradientDirection.Left,
        repeating: false,
        colors: [[Color.White, 0.0], [Color.Pink, 1]]
    })
}

界面实现说明：

1. 布局结构：

   • 使用Column作为根容器
   • 包含分隔线和TabBar组件

2. 样式设置：

   • 全屏布局（100%宽高）
   • 居中对齐内容
   • 线性渐变背景

3. TabBar配置：

   • 传入菜单数据
   • 绑定选中索引

4. 资源管理

text: $r("app.string.custom_tab_home"),
image: $r("app.media.tab_home"),
selectImage: $r("app.media.tab_community")

资源使用说明：

1. 字符串资源：

   • 使用$r()引用字符串资源
   • 支持多语言适配

2. 图片资源：

   • 使用$r()引用媒体资源
   • 分别配置默认和选中状态图标

总结

CustomDrawTabbarComponent组件展示了如何：

1. 创建自定义TabBar容器
2. 管理TabBar数据和状态
3. 集成自定义导航组件
4. 实现优雅的视觉效果

通过这个组件，我们可以看到：

• 组件化开发的最佳实践
• 状态管理的规范使用
• 资源引用的标准方式
• 界面布局的合理组织

这个组件为开发者提供了一个完整的自定义TabBar实现参考，可以基于此进行进一步的定制和扩展。