开发中使用——鸿蒙子页面跳转到指定Tab页面

---

背景

在开发中，难免会遇到从子页面或者更深层的页面，跳转到主Tab页面的指定哪个Tab？举个栗子，App中有四个Tab(A、B、C、D),如果从A页面跳转到C页面，如果做？或者说从B的子页面，跳转到D?

我们先看看普通页面的跳转和返回是怎么做的？

一、普通的页面跳转和返回

1.普通跳转

普通的页面跳转M->N，从M页面跳转到N页面，使用下面的方法是可以。

      this.getUIContext().getRouter().pushUrl({url: "pages/NPage"});

2.带参数跳转

普通的页面跳转M->MDetailPage，从M页面跳转到M的详情页面（MDetailPage），使用下面的方法是可以。

// M页面跳转操作this.getUIContext().getRouter().pushUrl({url:"pages/MDetailPage",params: {id: this.model.id}})// M的详情页面MDetailPage接收参数aboutToAppear() {// 获取传递的M数据const params = this.getUIContext().getRouter().getParams() as Record<string, string>;if (params && params['id']) {this.id = params['id'] as string;}}

3.普通返回

普通的页面跳转N->M，从N页面跳转到M页面

this.getUIContext().getRouter().back();

4.返回到首页

从任何一个子页面，返回到导航栈的第一个页面。

this.getUIContext().getRouter().back(1);

二、返回主Tab的指定页面

这个时候，使用普通的跳转和返回达不到这个效果了？只能实现返回到主Tab页面，但是指定哪个Tab该怎么实现呢。

1.思考：通过发消息

我想到了使用flutter中的eventBus，发个消息过来，在主tab页面接收后，指定tab切到具体的tab子页面中。

以为现在的鸿蒙知识，好像不能这样实现吧，我所知的是不可以的。

2.思考：全局控制Tab的控制器

我仔细想了一下，好像可行。搞个单例类，搞两个属性，一个是Tab的控制器，一个是记录当前是哪个Tab。

• 使用修饰符@ObservedV2装饰这个单例类，使用修饰符@Trace装饰这两个属性，来监听这两个属性的变化。

@ObservedV2
export class AppModelManager{static instance:AppModelManager;constructor() {}static getInstance(){if(AppModelManager.instance == null){AppModelManager.instance = new  AppModelManager();}return AppModelManager.instance;}@Tracepublic currentTabIndex:number = 0;@Tracepublic tabsController: TabsController = new TabsController();}

• 然后在主Tab中，使用这两个属性。将原来使用tabsController和currentTabIndex的地方，换成单例中的这个。

/// 在原来使用tabsController的地方，换成单例类中的tabsControllerTabs({ barPosition: BarPosition.End, controller: AppModelManager.getInstance().tabsController }) {...... }.onChange((index: number) => {AppModelManager.getInstance().currentTabIndex = index;}).width('100%').height('100%')}.width('100%').height('100%')}/// 在原来使用currentTabIndex的地方，换成单例类中的currentTabIndex@Builder TabBuilder(title: Resource, index: number, normalImg: Resource, selectedImg: Resource) {Column() {Image(AppModelManager.getInstance().currentTabIndex === index ? selectedImg : normalImg).width(24).height(24)Text(title).fontSize(12).fontColor(AppModelManager.getInstance().currentTabIndex === index ? $r('app.color.tab_selected') : $r('app.color.tab_normal')).margin({ top: 4 })}.width('100%').height('100%').justifyContent(FlexAlign.Center).onClick(() => {AppModelManager.getInstance().currentTabIndex = index;AppModelManager.getInstance().tabsController.changeIndex(index);})

• 在你需要返回的页面中，调用单例中的tabsController和currentTabIndex即可。别忘了最后调用back(1)返回到主页面。

      CacheDataManager.getInstance().currentTabIndex = 2;CacheDataManager.getInstance().tabsController.changeIndex(2);this.getUIContext().getRouter().back(1);

至此功能实现了。