Tab导航栏tabbar子组件突出上沿显示

const COMMUNITY_TAB_BAR_INDEX: number = 2; // 初始化社区的tab下标 
const ARC_MARGIN_TOP: number = -30; // 圆弧的上外间距为-30 
 
export class TabBarDataType { 
  id: number; 
  defaultIcon: ResourceStr; 
 
  constructor(id: number, defaultIcon: ResourceStr) { 
    this.id = id; 
    this.defaultIcon = defaultIcon; 
  } 
} 
 
export const TABINFO: TabBarDataType[] = [ 
  new TabBarDataType(0, $r('app.media.icon')), 
  new TabBarDataType(1, $r('app.media.icon')), 
  new TabBarDataType(2, $r('app.media.icon')), 
  new TabBarDataType(3, $r('app.media.icon')), 
  new TabBarDataType(4, $r('app.media.icon')), 
]; 
 
@Entry 
@Component 
struct TabViewDemo { 
  @Provide selectedIndex: number = 0; // 初始化被选定的tabBar下标 
  private controller: TabsController = new TabsController(); // 初始化Tab控制器 
 
  build() { 
    Column() { 
      Tabs({ index: this.selectedIndex, barPosition: BarPosition.End, controller: this.controller }) { 
        TabContent() { 
          Text("tab1") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab2") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab3") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab4") 
            .fontSize(26) 
        } 
 
        TabContent() { 
          Text("tab5") 
            .fontSize(26) 
        } 
      } 
      .vertical(false) 
      .scrollable(false) 
      .layoutWeight(1) 
      .backgroundColor('#ffdbd9d9') 
      .barHeight(0) 
      .onChange((index: number) => { 
        this.selectedIndex = index; 
      }) 
 
      // 自定义TabBar组件 
      CustomTabBar({ selectedIndex: $selectedIndex }) 
    }.width("100%") 
    .height("100%") 
  } 
} 
 
@Component 
struct CustomTabBar { 
  @Link selectedIndex: number; // 初始化被选定的tabBar下标 
 
  build() { 
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 
      ForEach(TABINFO, (item: TabBarDataType, tabIndex: number) => { 
        // 单独一个TabBar组件 
        TabItem({ 
          tabBarIndex: tabIndex, 
          selectedIndex: $selectedIndex, 
        }) 
      }) 
    } 
    .height(60) 
  } 
} 
 
@Component 
struct TabItem { 
  @Prop tabBarIndex: number; // tabBar下标 
  @Link selectedIndex: number; // 初始化被选定的tabBar下标 
 
  build() { 
    Column() { 
      // 判断tab的下标是否为2 
      if (this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX) { 
        Column() { 
          Image(TABINFO[this.tabBarIndex].defaultIcon) 
            .size({ width: 43, height: 43 }) 
            .interpolation(ImageInterpolation.High) 
            .borderRadius(22) 
        } 
        .width(52) 
        .height(52) 
        .borderRadius(24) 
        .margin({ top: ARC_MARGIN_TOP }) 
        .backgroundColor(Color.White) 
        .justifyContent(FlexAlign.Center) 
      } else { 
        Column() { 
          // 通过被选中的tabBar下标值和tabBar的默认下标值来改变图片显示 
          Image(TABINFO[this.tabBarIndex].defaultIcon) 
            .interpolation(ImageInterpolation.High) 
            .size( 
              { width: 28, height: 28 }) 
            .borderRadius(14) 
        } 
        .width(37) 
        .height(37) 
        .justifyContent(FlexAlign.Center) 
      } 
    } 
    .width(60) 
    .onClick(() => { 
      // 更新被选中的tabBar下标 
      this.selectedIndex = this.tabBarIndex; 
    })