鸿蒙HarmonyOS NEXT实战开发：自定义TabBar页签实现案例

最新推荐文章于 2025-03-04 13:42:17 发布

前端_王华QAQ

最新推荐文章于 2025-03-04 13:42:17 发布

阅读量427

点赞数 4

分类专栏：鸿蒙next实战鸿蒙文章标签：鸿蒙鸿蒙系统 android 驱动开发嵌入式硬件 harmonyos

本文链接：https://blog.youkuaiyun.com/wanghuaQAQ/article/details/141037376

版权

介绍

本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示，并有一小段动画效果。

效果图预览

使用说明：

依次点击tabBar页面，除了社区图标之外，其它图标往上移动一小段距离。

实现思路

场景1：TabBar中间页面实现有一圈圆弧外轮廓

将Image组件外层包裹一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。这里borderRadius的值设置为容器组件宽度的一半，margin的top值根据开发者的ux效果设置合适的值即可。

  Column() {
    Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon :
          TABINFO[this.tabBarIndex].defaultIcon)
      .size({
        width: $r('app.integer.custom_tab_community_image_size'),
        height: $r('app.integer.custom_tab_community_image_size')
      })
      .interpolation(ImageInterpolation.High) // TO