鸿蒙OH实战开发：自定义TabBar

---

📚往期学习笔录📝：

📝 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

📝 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

📝 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

📝 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

📝 记录一场鸿蒙开发岗位面试经历~

📝 持续更新中……

---

介绍

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

效果图预览

使用说明：

1. 依次点击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)
      .