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

本文原创发布在华为开发者社区。

介绍

本示例实现点击底部TabBar切换展示页面，同时会有选中的图标变化动效，中间凸起的底部导航。

实现中间凸起导航源码链接

效果预览

使用说明

点击切换导航，选中后展示不同特效。

实现思路

1. 添加TabContent()组件，构建底部导航栏；

    TabContent() {
      Text($r('app.string.home'))
        .fontSize($r('app.integer.title_font_size'))
        .padding(20)
    }

2. 在数据量比较少的情况下使用ForEach加载TabItem；

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

3. 实现TabBar中间凸起。

   • 将Image外层包括一层容器组件，通过设置borderRadius以及margin的top值实现圆弧外轮廓效果
   • borderRadius的值设置为容器组件宽度的一半，margin的top值根据ux效果设置合适的值

      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)
      }