HarmonyOS Tab组件自定义风格实现？

Question

底部的tabbar是自定义样式，针对与tab中的按钮，现在HarmonyOS是支持自定义的。但是针对与tabbar本身的样式，有办法可以自定义吗？

需求:

1. tabbar本身有圆角，且与灰色背景
2. tabbar不是处于页面的最底部，而是距离页面最底部有间距
3. tabbar悬浮与整个页面的上方
4. 中间扫码按钮有动画支持，绿色线条有上下循环移动的效果

Answer 1

参考以下代码：

@Entry
@Component
struct Drag2 {
  @State tabArray: Array<number> = [0, 1, 2]
  @State focusIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  myTabBar() {
    Row(){
      Row(){
        ForEach(this.tabArray,(item:number,index)=>{
          Column(){
            Image($r('app.media.app_icon')).width('20').padding(2)
            Text('测试')
              .fontSize(14)
              .fontColor(this.focusIndex === index?'#4862ba':'#333333')
          }
          .onClick(() => {
            this.controller.changeIndex(index)
            this.focusIndex = index
          })
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .width(50)
          .height(50)
        })
      }
      .height(50)
      .width('90%')
      .justifyContent(FlexAlign.SpaceAround)
      .backgroundColor('white')
      .borderRadius(25)
    }
    .justifyContent(FlexAlign.Center)
    .height("50")
    .width('100%')
    .margin({bottom:50})
  }

  build() {
    Column() {
      Stack({alignContent:Alignment.BottomStart}) {
        //tabs
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            TabContent() {
              Text('我是页面 ' + item + " 的内容")
                .height('100%')
                .width('100%')
                .fontSize(30)
            }
            .backgroundColor("#33333333")
          })
        }
        .barHeight(0)
        .animationDuration(200)
        .onChange((index: number) => {
          console.log('foo change')
          this.focusIndex = index
        })
        // 页签
        this.myTabBar()
      }
      .width('100%')
    }
    .height('100%')
  }
}