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

文章目录

背景
一、普通的页面跳转和返回
二、返回主Tab的指定页面
- 1.思考：通过发消息
- 2.思考：全局控制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;
}
@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);

至此功能实现了。