HarmonyOS tabbar如何实现中间按钮凸出来的效果

可参考DEMO：

import { router } from '@kit.ArkUI'

@Entry
@Component
struct onePage {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  tabTitle: string[] = ['健康', '商城', '预警中心', '消息', '我的']

  @Builder
  imgText(item: string, index: number) {
    if (index === 2) {
      Column() {
        Column() {
          Image($r('app.media.startIcon'))
            .height(50)
            .height(50)

            .objectFit(ImageFit.Contain)
            .borderRadius(100)
        }
        .height(60)
        .width(60)
        .offset({ y: -20 })
        .backgroundColor(Color.White)
        .borderRadius(100)

        // Text(item)
        //   .fontSize(15)
        //   .offset({ y: -10 })
      }
      .width('20%')
      .height('100%')
      .backgroundColor(Color.Blue)

      .justifyContent(FlexAlign.Center)

      // .onClick(() => {
      //   router.pushUrl({
      //     url: 'pages/testPage'
      //   })
      // })
    } else {
      Column({ space: 10 }) {
        Image($r('app.media.startIcon'))
          .height(40)
          .objectFit(ImageFit.Contain)
        Text(item)
          .fontSize(15)
      }
      .width('20%')
      .height('100%')
      .backgroundColor(Color.Blue)
      .onClick(() => {
        this.currentIndex = index
        this.controller.changeIndex(this.currentIndex)
      })
    }
  }

  @Builder
  bottomBuilder() {
    Row() {
      ForEach(this.tabTitle, (item: string, index: number) => {
        this.imgText(item, index)
      })
    }
    // .position({x:0,y:'10%'})
    .justifyContent(FlexAlign.SpaceEvenly)
    .width('100%')
    .height('10%')
  }

  build() {
    Column() {
      Tabs({ index: this.currentIndex, controller: this.controller, barPosition: BarPosition.End }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }

        // TabContent() {
        // }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#cccccc')
        }

      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')

      // .height('100%')
      // .layoutWeight(1)
    }
    .overlay(this.bottomBuilder(), { align: Alignment.End, offset: { x: 0, y: 360 } }) //在当前组件上，增加遮罩文本或者叠加自定义组件作为该组件的浮层。
    .width('100%')
    .height('100%')
  }
}