HarmonyOS 鸿蒙Next：tabs+tabcontent内部跳转navdestination,底部tabs不随着切换

我把代码贴出来，希望大佬给看下

[@Builder](/user/Builder)
export function PageBuilder() {
  MainTab()
}
/**

登录后首页
@author lsj
*/
@Component
export struct MainTab {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
pathStack: NavPathStack = new NavPathStack()
@State currentIndex: number = 0
private tabsController: TabsController = new TabsController();

@Builder
TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
Column() {
Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
.size({ width: 25, height: 25 })
Text(title)
.fontColor(this.currentIndex === targetIndex ? ‘#1698CE’ : ‘#6B6B6B’)
}
.width(‘100%’)
.height(50)
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(this.currentIndex);
})
}
build() {
NavDestination() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Work()
}
.tabBar(this.TabBuilder(‘工作’, 0, $r(‘app.media.icon_maintab_work_selected’),
$r(‘app.media.icon_maintab_work_normal’)))
    TabContent() {
      Contact()
    }
    .tabBar(<span class="hljs-keyword">this</span>.TabBuilder(<span class="hljs-string">'联系人'</span>, <span class="hljs-number">1</span>, $r(<span class="hljs-string">'app.media.icon_maintab_contact_selected'</span>),
      $r(<span class="hljs-string">'app.media.icon_maintab_contact_normal'</span>)))

    TabContent() {
      Mine({ pathStack: <span class="hljs-keyword">this</span>.pathStack })
    }
    .tabBar(<span class="hljs-keyword">this</span>.TabBuilder(<span class="hljs-string">'我的'</span>, <span class="hljs-number">2</span>, $r(<span class="hljs-string">'app.media.icon_maintab_me_selected'</span>),
      $r(<span class="hljs-string">'app.media.icon_maintab_me_normal'</span>)))
  }
  .barWidth(<span class="hljs-string">'100%'</span>)
  .barHeight(<span class="hljs-number">50</span>)
  .barMode(BarMode.Fixed)
  .onChange((index: number) =&gt; {
    <span class="hljs-keyword">this</span>.currentIndex = index;
  })
}.hideTitleBar(<span class="hljs-literal">true</span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这是Maintab页面，

@Component
export default struct Mine {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
@State pathStack: NavPathStack = new NavPathStack()
@State userName: string = ‘’
@State headerText: string = ‘’

build() {
Navigation(this.pathStack) {
Stack() {
Image($r(‘app.media.bg_maintab_mine’)).width(‘100%’)
Column() {
Text(‘我的’)
.fontSize(22)
.fontColor(Color.White)
.height(42)
.width(‘90%’)
.textAlign(TextAlign.Start)
Row() {
Text(‘系统’)
.backgroundColor(’#ff45a1f5’)
.borderRadius(1000)
.textAlign(TextAlign.Center)
.fontColor(Color.White)
.width(80)
.height(80)
.margin({ left: 20 })
.fontSize(22)
Text(this.userName).fontColor(Color.Black).fontSize(18).margin({ left: 22 })
}
.width(‘90%’)
.height(100)
.justifyContent(FlexAlign.Start)
.backgroundColor(Color.White)
.borderRadius(8)
      Row() {
        Image($r(<span class="hljs-string">'app.media.icon_reset_pwd'</span>)).width(<span class="hljs-number">28</span>).height(<span class="hljs-number">28</span>).margin({ left: <span class="hljs-number">16</span> })
        Text($r(<span class="hljs-string">'app.string.reset_pwd'</span>)).margin({ left: <span class="hljs-number">12</span> }).layoutWeight(<span class="hljs-number">1</span>)
        Image($r(<span class="hljs-string">'app.media.icon_arrow_right'</span>))
          .width(<span class="hljs-number">22</span>)
          .height(<span class="hljs-number">22</span>)
          .objectFit(ImageFit.Contain)
          .margin({ right: <span class="hljs-number">12</span> })
      }
      .width(<span class="hljs-string">'100%'</span>)
      .height(<span class="hljs-number">48</span>)
      .backgroundColor(Color.White)
      .margin({ top: <span class="hljs-number">20</span> })

      Row() {
      }.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-number">1</span>).backgroundColor($r(<span class="hljs-string">'app.color.divider_color'</span>))

      Row() {
        Image($r(<span class="hljs-string">'app.media.icon_reset_pwd'</span>)).width(<span class="hljs-number">28</span>).height(<span class="hljs-number">28</span>).margin({ left: <span class="hljs-number">16</span> })
        Text($r(<span class="hljs-string">'app.string.setup'</span>)).margin({ left: <span class="hljs-number">12</span> }).layoutWeight(<span class="hljs-number">1</span>)
        Image($r(<span class="hljs-string">'app.media.icon_arrow_right'</span>))
          .width(<span class="hljs-number">22</span>)
          .height(<span class="hljs-number">22</span>)
          .objectFit(ImageFit.Contain)
          .margin({ right: <span class="hljs-number">12</span> })
      }
      .width(<span class="hljs-string">'100%'</span>)
      .height(<span class="hljs-number">48</span>)
      .backgroundColor(Color.White)
      .onClick(() =&gt; {
        router.pushUrl({ url: <span class="hljs-string">"pages/Setup"</span> })
      })

      Row() {
      }.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-number">1</span>).backgroundColor($r(<span class="hljs-string">'app.color.divider_color'</span>))

      Row() {
        Image($r(<span class="hljs-string">'app.media.icon_reset_pwd'</span>)).width(<span class="hljs-number">28</span>).height(<span class="hljs-number">28</span>).margin({ left: <span class="hljs-number">16</span> })
        Text($r(<span class="hljs-string">'app.string.about'</span>)).margin({ left: <span class="hljs-number">12</span> }).layoutWeight(<span class="hljs-number">1</span>)
        Image($r(<span class="hljs-string">'app.media.icon_arrow_right'</span>))
          .width(<span class="hljs-number">22</span>)
          .height(<span class="hljs-number">22</span>)
          .objectFit(ImageFit.Contain)
          .margin({ right: <span class="hljs-number">12</span> })
      }
      .width(<span class="hljs-string">'100%'</span>)
      .height(<span class="hljs-number">48</span>)
      .backgroundColor(Color.White)
      .margin({ top: <span class="hljs-number">20</span> })
      .onClick(() =&gt; {
        <span class="hljs-keyword">this</span>.pathStack.pushPath({ name: <span class="hljs-string">"about"</span> })
      })

      Button(<span class="hljs-string">'注销'</span>, { type: ButtonType.Capsule, stateEffect: <span class="hljs-literal">true</span> })
        .margin({ left: <span class="hljs-number">20</span>, right: <span class="hljs-number">20</span>, top: <span class="hljs-number">20</span> })
        .width(<span class="hljs-number">300</span>)
        .height(<span class="hljs-number">40</span>)
        .backgroundColor($r(<span class="hljs-string">'app.color.logout_color'</span>))
        .onClick(() =&gt; {

        })
    }
  }.alignContent(Alignment.Top)
}.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor($r(<span class="hljs-string">'app.color.divider_color'</span>)).hideTitleBar(<span class="hljs-literal">true</span>)
}
aboutToAppear() {
dpUtil.getString(this.context, DataConstant.USER_NAME, “”).then((value) => {
this.userName = value.toString();
this.headerText = value.toString().length > 2 ? value.toString().substring(0, 2) : value.toString()
})
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

上面这是我的页面，其中关于那里通过this.pathStack.pushPath({ name: “about” })跳转到About页面，下面是About页面代码

@Component
export struct About {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
pathStack: NavPathStack = new NavPathStack()
@State versionName: string = “”;

build() {
NavDestination() {
Column() {
ToolBar({
onBackClick: () => {
this.pathStack.pop()
}
})
Image($r(‘app.media.startIcon’))
.width(120).height(120)
.margin(30)
Text(this.versionName)
Row() {
Text(‘隐私政策’).layoutWeight(1)
Image($r(‘app.media.icon_arrow_right’))
.width(22)
.height(22)
.objectFit(ImageFit.Contain)
.margin({ right: 12 })
}
.backgroundColor(Color.White)
.width(‘100%’)
.height(48)
.margin({ top: 12 })
.padding({ left: 12 })
.onClick(() => {
router.pushUrl({ url: “pages/Privacy” })
})
    Row() {
    }.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-number">1</span>).backgroundColor($r(<span class="hljs-string">'app.color.divider_color'</span>))

    Row() {
      Text(<span class="hljs-string">'检测更新'</span>).layoutWeight(<span class="hljs-number">1</span>)
      Image($r(<span class="hljs-string">'app.media.icon_arrow_right'</span>))
        .width(<span class="hljs-number">22</span>)
        .height(<span class="hljs-number">22</span>)
        .objectFit(ImageFit.Contain)
        .margin({ right: <span class="hljs-number">12</span> })
    }
    .backgroundColor(Color.White)
    .width(<span class="hljs-string">'100%'</span>)
    .height(<span class="hljs-number">48</span>)
    .padding({ left: <span class="hljs-number">12</span> })
    .onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.checkUpdate();
    })
  }.backgroundColor($r(<span class="hljs-string">'app.color.divider_color'</span>)).width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>)
}.hideTitleBar(<span class="hljs-literal">true</span>)
}
aboutToAppear() {
getVersionName().then((value) => {
this.versionName = value;
})
}
/**

检测app更新
*/
checkUpdate() {

}
onBackPress() {
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

About页面根布局是NavDestination。

就上面这写代码，运行出来，在点击关于时，下面的tabs没有被覆盖，貌似跳转页面是在上面跳转的。