鸿蒙ArkTS中两种自定义TabBar导航栏的方法

最新推荐文章于 2025-06-03 20:41:19 发布

现在也很好

最新推荐文章于 2025-06-03 20:41:19 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

文章标签：鸿蒙系统鸿蒙

本文链接：https://blog.csdn.net/m0_73643786/article/details/139396549

很多场景下，官方的TabBar并不如意，所以只能自定义，实现炫酷多彩的视觉效果。

两种方法：

1.第一种，自定义Builder样式。

2.第二种，用自定义的tabbar通过stack布局覆盖掉原生的。

区别：

更加灵活，可以调整导航栏间距、位置

具体的代码是啥呢：

//第二种方法的实现:
Stack({ alignContent: Alignment.Top }) {
      Tabs({ barPosition: BarPosition.Start, 
                index: $$this.currentIndex, 
            controller: this.tabController }) {
        ForEach(this.List, (item: Tab) => {
          TabContent(){
            Text('')
          }.tabBar('Title')
        })
      }
      Row ({ space: 30 }) {
        ForEach(this.List, (item: Tab) => {
          //自定义builder
            this.styleBar(item)
        })
      }
      .width('100%')
      .height(50)
   
    }