
回复
@TOC
在开发中,难免会遇到从子页面或者更深层的页面,跳转到主Tab页面的指定哪个Tab?举个栗子,App中有四个Tab(A、B、C、D),如果从A页面跳转到C页面,如果做?或者说从B的子页面,跳转到D?
我们先看看普通页面的跳转和返回是怎么做的?
普通的页面跳转M->N,从M页面跳转到N页面,使用下面的方法是可以。
this.getUIContext().getRouter().pushUrl({
url: "pages/NPage"
});
普通的页面跳转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;
}
}
普通的页面跳转N->M,从N页面跳转到M页面
this.getUIContext().getRouter().back();
从任何一个子页面,返回到导航栈的第一个页面。
this.getUIContext().getRouter().back(1);
这个时候,使用普通的跳转和返回达不到这个效果了?只能实现返回到主Tab页面,但是指定哪个Tab该怎么实现呢。
我想到了使用flutter中的eventBus,发个消息过来,在主tab页面接收后,指定tab切到具体的tab子页面中。
以为现在的鸿蒙知识,好像不能这样实现吧,我所知的是不可以的。
我仔细想了一下,好像可行。搞个单例类,搞两个属性,一个是Tab的控制器,一个是记录当前是哪个Tab。
@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();
}
/// 在原来使用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);
})
CacheDataManager.getInstance().currentTabIndex = 2;
CacheDataManager.getInstance().tabsController.changeIndex(2);
this.getUIContext().getRouter().back(1);
至此功能实现了。