HarmonyOS tabs阴影效果

build() { 
  Tabs({ barPosition: BarPosition.End }) { 
    TabContent() { 
      HomePage() 
    } 
    .tabBar(this.tabBuilder('嗨客', 0, $r('app.media.tab_home'), $r('app.media.tab_homeun'))) 
    TabContent() { 
      Text('数字经营') 
    } 
    .tabBar(this.tabBuilder('数字经营', 1, $r('app.media.tab_report_form'), $r('app.media.tab_report_formun'))) 
    TabContent() { 
      Text('学院') 
    } 
    .tabBar(this.tabBuilder('学院', 2, $r('app.media.tab_video_help'), $r('app.media.tab_video_helpun'))) 
    TabContent() { 
      Text('我的') 
    } 
    .tabBar(this.tabBuilder('我的', 3, $r('app.media.tab_mine'), $r('app.media.tab_mineun'))) 
  } 
  .onChange((index) => { 
    this.currentIndex = index 
  }) 
  .padding({ bottom: px2vp(this.bottomNavigationIndicatorHeight) }) 
} 
@Builder 
tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) { 
  Column() { 
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg) 
      .height(20) 
    Text(title) 
      .fontColor(this.currentIndex === targetIndex ? '#4858DD' : '#6B6B6B') 
      .margin({ top: 3 }) 
  } 
  .width('100%') 
  .height('100%') 
  .justifyContent(FlexAlign.Center) 
  .shadow({ radius: vp2px(1), color: '#f5f5f4', offsetY: -vp2px(2) }) 
}
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.