鸿蒙Next Tabs的TabBar中间凸起的一种实现方案

今天看群友讨论这个效果的实现方案，于是试着实现了一下，想出了现在这个方式， 利用Stack层叠布局能力，在底部中间覆盖，并设置margin的bottom，以达到预期， 问题点是这个margin的高度需要设置好，只能给tabbar设置了固定高度，然后margin值设置这个高度，
另一种实现方式：Tabs的TabBar中间凸起的另一种实现方案
最终实现效果

@Component
export struct TabsComponent {
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();

  build() {
    Stack() {
      Tabs({ index: this.selectedIndex, barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Text("首页")
            .fontSize(20)
            .padding(20)
        }.tabBar(this.TabItem(0, "首页"))

        TabContent() {
          Text("项目")
            .fontSize(20)
            .padding(20)
        }.tabBar(this.TabItem(1, "项目"))

        TabContent() {
          Text("广场")
            .fontSize(20)
            .padding(20)
        }.tabBar(this.TabItem(2, "广场"))

        TabContent() {
          Text("问答")
            .fontSize(20)
            .padding(20)
        }.tabBar(this.TabItem(3, "问答"))

        TabContent() {
          Text("我的")
            .fontSize(20)
            .padding(20)
        }.tabBar(this.TabItem(4, "我的"))
      }
      .vertical(false)
      // .scrollable(false)
      .layoutWeight(1)
      .backgroundColor(Color.Pink)
      .barHeight(60)
      .onChange((index: number) => {
        this.selectedIndex = index;
      })

      Image("")
        .size({ width: 50, height: 50 })
        .backgroundColor(Color.Red)
        .clip(true)
        .margin({ bottom: 35 })
        .onClick(() => {
          this.selectedIndex = 2
        })

    }.width("100%")
    .height("100%").alignContent(Alignment.Bottom)
  }

  @Builder
  TabItem(tabBarIndex: number, name: string) {
    Column({ space: 10 }) {
      Image((tabBarIndex == 2) ? '' : $r('app.media.startIcon'))
        .size({ width: 25, height: 25 })
      Text(name).fontSize(14).fontColor((tabBarIndex == this.selectedIndex) ? Color.Red : Color.Black)
    }.backgroundColor(Color.White).onClick(() => {
      this.selectedIndex = tabBarIndex
    }).width("100%").padding(5)
  }
}