【鸿蒙原生开发】HarmonyOS自定义实现tabbar样式

一：起因

因为今晚写代码的时候发现由于目前Tabs组件不支持设置上面页签的位置和方式，但是我又想改变一下那个样式，然后就有了一个想法自定义一个tabber去盖住原来的

二：思路

●状态管理：使用 @State 声明选项卡数据和当前选中索引。

●选项卡控制器：使用 TabsController 控制选项卡的切换。

●自定义选项卡栏：通过 @Builder 方法 getTabBar 动态生成选项卡栏。

●布局构建：

○使用 Stack 布局将选项卡组件和自定义选项卡栏堆叠在一起。
○使用 Tabs 组件显示选项卡内容。
○使用 Row 组件显示自定义选项卡栏。

三：一个重点的原理

在鸿蒙开发中，@Builder 方法用于动态生成组件，这意味着这些组件是在运行时根据当前状态和数据创建的。通过 @Builder 方法生成的组件能够根据变化的数据进行实时更新，而不需要重新构建整个组件树。

下面是机制：

●动态生成的定义： 动态生成意味着组件在运行时根据当前的状态和数据动态创建和更新，而不是在编译时就固定不变。这样可以使 UI 更加灵活和响应变化。

●@Builder 方法的作用： @Builder 方法是鸿蒙框架中的一个装饰器，用于声明一个方法为组件生成器。当组件需要更新时，框架会自动调用这些生成器方法来重新构建需要更新的部分，而不是重新构建整个页面。

●实时响应状态变化： 当 @Builder 方法内使用到的状态变量（比如 this.currentIndex）发生变化时，框架会触发这个方法重新执行，从而生成新的组件树。这使得选项卡栏能够根据选中的索引实时更新其样式和内容。

四：核心api

●@State：声明组件的状态变量。

●Tabs：创建选项卡组件。

●TabContent：定义选项卡的内容。