实现中间凸起导航鸿蒙示例代码

    TabContent() {
      Text($r('app.string.home'))
        .fontSize($r('app.integer.title_font_size'))
        .padding(20)
    }
1.
2.
3.
4.
5.

  ForEach(TABINFO, (item: TabBarDataType, tabIndex: number) => {
    // 单独一个TabBar组件
    TabItem({
      iconOffset: this.iconOffset,
      tabBarIndex: tabIndex,
      selectedIndex: $selectedIndex,
    })
1.
2.
3.
4.
5.
6.
7.

      if (this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX) {
        Column() {
          Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
            .size({
              width: $r('app.integer.community_image_size'),
              height: $r('app.integer.community_image_size')
            })// TODO：知识点：使用interpolation属性对图片进行插值，使图片显示得更清晰
            .interpolation(ImageInterpolation.High)
            .borderRadius($r('app.integer.community_image_container_border_radius_size'))
        }
        .width($r('app.integer.community_image_container_size'))
        .height($r('app.integer.community_image_container_size'))
        // TODO：知识点：通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。
        .borderRadius($r('app.integer.community_image_container_border_radius_size'))
        .margin({ top: ARC_MARGIN_TOP })
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.Center)
      } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.