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

至此功能实现了。

相关推荐
HarmonyOS_SDK1 小时前
数字商品服务助力开发者降本增效,加速数字商品商业变现
harmonyos
后端小张4 小时前
【鸿蒙开发手册】重生之我要学习鸿蒙HarmonyOS开发
开发语言·学习·华为·架构·harmonyos·鸿蒙·鸿蒙系统
猫林老师5 小时前
HarmonyOS测试与上架:单元测试、UI测试与App Gallery Connect发布实战
ui·单元测试·harmonyos
SWUT胖虎5 小时前
ArkTS 中@Extend 和@Styles 装饰器的用法和区别
harmonyos·arkts·鸿蒙·鸿蒙系统
猫林老师6 小时前
鸿蒙元服务开发:免安装的卡片式服务(Atomic Service)
华为·wpf·harmonyos
shr007_16 小时前
flutter 鸿蒙
flutter·华为·harmonyos
鼓掌MVP20 小时前
【案例实战】多维度视角:鸿蒙2048游戏开发的深度分析与感悟
华为·ai编程·harmonyos·arkts·游戏开发·ability
安卓开发者20 小时前
鸿蒙Next Performance Analysis Kit:打造极致流畅的应用体验
华为·harmonyos
Devil枫20 小时前
【案例实战】HarmonyOS应用性能优化实战案例
华为·性能优化·harmonyos
猫林老师20 小时前
HarmonyOS线程模型与性能优化实战
数据库·分布式·harmonyos