开发中使用——鸿蒙子页面跳转到指定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);

至此功能实现了。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
收藏
回复
举报
回复
    相关推荐