HarmonyOS 鸿蒙Next中Navigation和Tabs底部导航栏问题

问题描述

1、父页面跳转子页面后，底部导航栏仍旧显示

代码如下：

父页面 A：

build() {
    Column() {
      Tabs({
        // 确保导航栏在底部
        barPosition: BarPosition.End,
        controller: this.tabsController
      }) {
        // 1、记工
        TabContent() {
          RecordHome()
        }
        .padding({ left: '12vp', right: '12vp' })
        .backgroundColor($r('sys.color.comp_background_gray'))
        .tabBar(this.TabBuilder($r('app.string.nav_tab_recordWork'), 0, $r('sys.symbol.doc_plaintext_and_pencil')))

        // 2、统计
        TabContent() {
          RecordHome()
        }
        .padding({ left: '12vp', right: '12vp' })
        .backgroundColor($r('sys.color.comp_background_gray'))
        .tabBar(this.TabBuilder($r('app.string.nav_tab_statistics'), 1, $r('sys.symbol.form')))

        // 3、社区
        TabContent() {
          RecordHome()
        }
        .padding({ left: '12vp', right: '12vp' })
        .backgroundColor($r('sys.color.comp_background_gray'))
        .tabBar(this.TabBuilder($r('app.string.nav_tab_community'), 2, $r('sys.symbol.ellipsis_message')))

        // 4、我的
        TabContent() {
          RecordHome()
        }
        .padding({ left: '12vp', right: '12vp' })
        .backgroundColor($r('sys.color.comp_background_gray'))
        .tabBar(this.TabBuilder($r('app.string.nav_tab_mine'), 3, $r('sys.symbol.person')))
      }
      .width('100%')
      .height('100%')
      .barHeight('50vp')
      .barMode(BarMode.Fixed)
      .onChange((index: number) => {
        // 该方法实现双向绑定，以处理非用户点击导致的导航栏变化
        this.currentIndex = index;
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('sys.color.comp_background_gray'))
  }

父页面引用的 B 组件：

build() {
    Navigation(this.pageInfos) {
      Stack({ alignContent: Alignment.Bottom }) {
        Scroll() {
          Column() {
            // 记工概要
            Column() {
              // ... 省略
              // 记工项
              Column() {
                ForEach(this.recordWorkVM.getMockData(), (item: RecordWorkModel, index?: number) => {
                  RecordWorkItem({
                    recordData: item
                  }).onClick(() => {
                    // 跳转记工详情页
                    this.pageInfos.pushPathByName('recordDetail', item.id);
                  });
                }, (item: RecordWorkModel) => item.id);
              }
              .padding({ top: $r("app.float.component_interval_s"), bottom: $r("app.float.component_interval_s") });
            }
            .width('100%')
            .margin({ top: $r("app.float.component_interval_s"), bottom: $r("app.float.component_interval_s") })
            .padding($r("app.float.component_interval_s"))
            .borderRadius($r('app.float.component_radius_primary'))
            .backgroundColor(Color.White);

          }
          .width('100%')
          .backgroundColor($r('sys.color.comp_background_gray'))
        }
        .height('100%')
        .scrollBar(BarState.Off)
        .edgeEffect(EdgeEffect.Spring);

        // 悬浮菜单栏
        Button({ type: ButtonType.Circle }) {
          SymbolGlyph($r('sys.symbol.plus'))
            .fontSize($r('app.float.font_size_title_m'))
            .fontWeight(FontWeight.Bold)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
            .fontColor([$r('sys.color.icon_on_primary'), $r('sys.color.icon_on_secondary')]);
        }
        .onClick(() => {

        })
        .width($r("app.float.button_size_m"))
        .height($r("app.float.button_size_m"))
        .shadow({ radius: 10, color: Color.Gray })
        .margin({ bottom: $r('app.float.component_interval_m') })
        .backgroundColor($r('app.color.main_color'));
      }
      .width('100%')
      .height('100%')
    }
  }

详情页 C：

build() {
    NavDestination() {
      Text(this.recordId);
      Button('触发Info错误')
        .onClick(() => {
          ErrorService.showError(ErrorMode.INFO, $r('app.string.error_base'), this.getUIContext())
        });

      Button('触发Warn错误')
        .onClick(() => {
          ErrorService.showError(ErrorMode.WARN, $r('app.string.error_no_data'), this.getUIContext())
        });

      Button('触发Error错误')
        .onClick(() => {
          ErrorService.showError(ErrorMode.ERROR, $r('app.string.error_param'))
        });

      ErrorHandler();
    }
    .backgroundColor($r('sys.color.comp_background_gray'))
    .title($r('app.string.page_element_record_detail'))
    .onBackPressed(() => {
      // 弹出路由栈栈顶元素
      const popDestinationInfo = this.pageInfos.pop();
      console.info(`pop 返回值 ${JSON.stringify(popDestinationInfo)}`);
      return true;
    }).onReady((context: NavDestinationContext) => {
      // 获取已有路由堆栈
      this.pageInfos = context.pathStack;
    })
  }

2、通过官方文档：Tabs页面Navigation路由跳转的实现方式

得知，Navigation 要放在 Tabs 外层。如下：

build() {
    Column() {
      Navigation(this.pageInfos) {
        Tabs({
          // 确保导航栏在底部
          barPosition: BarPosition.End,
          controller: this.tabsController
        }) {
          // 1、记工
          TabContent() {
            RecordHome()
          }
          .padding({ left: '12vp', right: '12vp' })
          .backgroundColor($r('sys.color.comp_background_gray'))
          .tabBar(this.TabBuilder($r('app.string.nav_tab_recordWork'), 0, $r('sys.symbol.doc_plaintext_and_pencil')))
          // ... 省略
        }
      }
    }
}

但是首页，底部 Tabs 导航栏布局有问题，距离底部有很大一段距离：

先感谢大佬，希望能解答我的疑惑，谢谢~