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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.