HarmonyOS Next开发中如何自定义Tabs的样式？

Question

HarmonyOS Next开发中如何自定义Tabs的样式？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 HarmonyOS Next 中可以通过以下方式自定义 Tabs 的样式：
自定义一个 Tab 可以叠加在页面中，设置其相应的 TabBar，距离其底部的距离，使其突出显示。参考以下代码：

@Entry 
@Component 
struct Drag2 { 
 @State tabArray: Array<number> = [0, 1, 2] 
 @State focusIndex: number = 0 
 @State pre: number = 0 
 @State index: number = 0 
 private controller: TabsController = new TabsController() 
 @State test: boolean = false 
 @State icon:string ='app.media.icon' 

 @Builder 
 Tab(tabName: string, tabItem: number, tabIndex: number) { 
  Column({ space: 10 }) { 
   Stack(){ 
    Row(){ 
     Image($r('app.media.startIcon')) 
      .width(40).height(40) 
     Text(tabName).fontSize(14) 
      .margin({top:60,left: -40}) 
    }.width(80).height(80).backgroundColor("#ffffff").justifyContent(FlexAlign.Center) 
   .border({ 
      radius: { topLeft: 130, topRight: 130, bottomLeft: 40, bottomRight: 80 }, 
    }) 
   } 
  .margin({bottom:tabIndex ===1? 80 : 0}) 
  } 
 .justifyContent(FlexAlign.Center) 
 }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。