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

前端森之鸟

发布于 2025-9-9 23:13

浏览

0收藏

@TOC

背景

在开发中，难免会遇到从子页面或者更深层的页面，跳转到主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;
  }
  @Trace
  public currentTabIndex:number = 0;

  @Trace
  public tabsController: TabsController = new TabsController();
  
}

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

/// 在原来使用tabsController的地方，换成单例类中的tabsController
      Tabs({ 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);

至此功能实现了。