Navigation常见场景的解决方案

奶盖

发布于 2024-5-10 11:41

浏览

0收藏

路由跳转场景

页面跳转是路由最常用的能力，Navigation通过NavPathStack提供了诸多方法，下文以pushDestination方法为例，介绍Navigation的路由跳转相关能力。

页面间跳转

NavPathStack提供了路由管理的能力，通过NavPathStack进行页面跳转，主要适用于页面较多的应用。

Step1：创建NavPathStack对象pageStack，通常使用@Provide进行修饰，方便后续子组件通过@Comsumer获取，以实现子页面的路由跳转。

也可以将pageStack传入路由框架，以实现路由框架开发（后续路由框架章节会介绍）的开发。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  ... 
  build() { 
    ... 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

Step2：构建路由表pageMap，该方法通过@Builder进行修饰，通过传入的pageName属性，返回不同页面。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  @Builder 
  PageMap(pageName: string) { 
    if (pageName === 'loginPage') { 
      loginPageView() 
    } else if (pageName === 'mainPage') { 
      mainPageView() 
    } 
  } 
  build() { 
    ... 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Step3：在build创建Navigation组件（需要传入pageStack参数），通过navDestination属性传入路由表pageMap，并通过pageStack.pushPath()实现页面跳转。

@Entry 
@Component 
struct mainPageView { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  @Builder 
  pageMap(pageName: string) { 
    if (pageName === 'loginPage') { 
      loginPageView() 
    } else if (pageName === 'mainPage') { 
      mainPageView() 
    } 
  } 
  build() { 
    Navigation(this.pageStack){ 
      ... 
      Button('login').onClick( ent => { 
        let pathInfo : NavPathInfo = new NavPathInfo('loginPage', null) 
        this.pageStack.pushDestination(pathInfo, true); 
      }) 
    }.navDestination(this.pageMap) 
    ... 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

页面间参数传递

Navigation的页面间，通过NavPathInfo对象中的params属性，实现从发起页到目标页的数据传递；通过onPop回调参数，实现处理目标页面的返回。

Step1：构建NavPathInfo对象，输入需要传递给目标页面的参数。

params参数：将需要传递的数据封装起来进行传递，无法传递对象里面的函数。具体的支持参数可以参考指南（）

onPop参数：目标页面触发pop时的返回，在回调中通过PopInfo.info.param获取到返回的对象。

// 发起页 mainPage 
let loginParam : LoginParam = new LoginParam() 
// 构建pathInfo对象 
let pathInfo : NavPathInfo = new NavPathInfo('loginPage', loginParam 
  , (popInfo: PopInfo) => { 
    let loginParam : LoginParam = popInfo.info.param as LoginParam; 
    ... 
  }) 
// 讲参数传递到目标页 
this.pageStack.pushDestination(pathInfo, true);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Step2：目标页通过“NavPathStack.getParamByIndex(0)”获取到发起页传递过来的参数

@Component 
export struct loginPageView { 
  @Consume('pageInfo') pageStack : NavPathStack; 
 
  aboutToAppear(): void { 
    this.loginParam = this.pageStack.getParamByIndex(0) as LoginParam; 
  } 
  ... 
}1.
2.
3.
4.
5.
6.
7.
8.
9.

Step3：目标页通过NavPathStack.pop方法返回起始页，其result参数用来传递需要返回给起始页的对象。

@Component 
export struct loginPageView { 
  @Consume('pageInfo') pageStack : NavPathStack; 
  // 页面构建的对象 
  private loginParam! : LoginParam; 
  ... 
  build() { 
    NavDestination(){ 
      ... 
      Button('login').onClick( ent => { 
        // 将对象返回给起始页 
        this.pageStack.pop(this.loginParam, true) 
      }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

跨模块页面跳转

当应用模块较多，需要使用HSP（HAR）进行多模块开发，比如登录模块是一个独立团队开发，以HSP(HAR)的形式交付。此时主页应当从mainPage跳转到HSP（HAR）中的页面，需要先导入模块的自定义组件，将组件添加到pageMap中，再通过pushDestination进行跳转。

Step1：从HSP（HAR）中完成自定义组件（需要跳转的目标页面）开发，讲自定义组件申明为export。

@Component 
export struct loginPageInHSP { 
  @Consume('pageStack') pageStack: NavPathStack; 
  ... 
  build() { 
    NavDestination() { 
      ... 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Step2：在HSP（HAR）的index.ets中导出组件。

export { loginPageInHSP } from "./src/main/ets/pages/loginPageInHSP"1.

Step3：配置好HSP（HAR）的项目依赖后，在mainPage中导入自定义组件，并添加到pageMap中，即可正常调用。// 导入模块目标页自定义组件。

import { loginPageInHSP } from 'library/src/main/ets/pages/loginPageInHSP' 
@Entry 
@Component 
struct mainPage { 
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack() 
  @Builder pageMap(name: string) { 
    if (name === 'loginPageInHSP') { 
      // 路由到hsp包中的登录页面 
      loginPageInHSP() 
    } 
  } 
  build() { 
    Navigation(this.pageStack) { 
      Button("login With HSP module") 
        .onClick(() => { 
          let loginParam : LoginParamInHSP = new LoginParamInHSP() 
          let pathInfo : NavPathInfo = new NavPathInfo('loginPageInHSP', loginParam, (popInfo: PopInfo) => {}) 
          this.pageStack.pushDestination(pathInfo, true); 
        }) 
    } 
    .navDestination(this.pageMap) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

页面转场

默认转场动画

Navigation的pushXXX和pop方法中都带有一个参数animated，将animated设置成false则会取消转场动画，路由到Dialog模式页面或者路由出Dialog模式页面是，均无转场动画，如果需要转场动画，可以通过自定义转场动画实现。

自定义转场动画

Navigation通过customNavContentTransition事件提供自定义转场动画的能力，当转场开始时，通过回调函数告知开发者，告知此次动画from（从哪来）、to（到哪去）、是Push、Pop亦或是Repalce。这里需要注意当为根视图时，NavContentInfo的name值为undefined。

开发者可以在customNavContentTransition的回调函数中进行动画处理，返回NavigationAnimatedTransition自定义转场协议已实现自定义转场。

NavigationAnimatedTransition对象中包含三个参数，timeout（动画超时结束时间），transition（自定义动画执行回调），onTransitionEnd（转场完成回调），需要在transition方法中实现具体动画逻辑。

由于自定义转场参数是在Navigation层级，但是每个页面都会有其特定的自定义转场效果，因此需要定义一套转场动画框架，已实现在Navigation层面对框架进行统一管理，各个页面通过实现框架提供的回调函数，将其特定的动画效果传递给Navigation。

Step1：构建动画框架，通过一个Map管理各个页面自定义自定义动画对象CustomTransition，CustomTransition对象提供了Push、Pop、Replace各个动画阶段的回调函数给各个页面进行补充，此处将各个阶段细分为In和Out，从而实现页面进入和退出时不同的转场效果。

// 自定义动画对象，定义了Push、Pop、Replace各个动画阶段的回调函数。

export class CustomTransition { 
  pageID : number = -1; 
  onPushInStart: () => void = () => {}; 
  onPushInEnd: () => void = () => {}; 
  onPushInFinish: () => void = () => {}; 
  onPopInStart: () => void = () => {}; 
  onPopInEnd: () => void = () => {}; 
  onPopInFinish: () => void = () => {}; 
  onReplaceInStart: () => void = () => {}; 
  onReplaceInEnd: () => void = () => {}; 
  onReplaceInFinish: () => void = () => {}; 
  onPushOutStart: () => void = () => {}; 
  onPushOutEnd: () => void = () => {}; 
  onPushOutFinish: () => void = () => {}; 
  onPopOutStart: () => void = () => {}; 
  onPopOutEnd: () => void = () => {}; 
  onPopOutFinish: () => void = () => {}; 
  onReplaceOutStart: () => void = () => {}; 
  onReplaceOutEnd: () => void = () => {}; 
  onReplaceOutFinish: () => void = () => {}; 
  ... 
 
  // 获取启动阶段参数回调 
  public getStart(operation : NavigationOperation, isInPage : boolean) : () => void { 
    if (operation == NavigationOperation.PUSH) { 
      if (isInPage) { 
        return this.onPushInStart; 
      } else { 
        return this.onPushOutStart; 
      } 
    } else if (operation == NavigationOperation.POP) { 
      if (isInPage) { 
        return this.onPopInStart; 
      } else { 
        return this.onPopOutStart; 
      } 
    } else { 
      if (isInPage) { 
        return this.onReplaceInStart; 
      } else { 
        return this.onReplaceOutStart; 
      } 
    } 
  } 
  // 获取动画结束阶段参数回调 
  public getEnd(operation : NavigationOperation, isInPage : boolean) : () => void { 
    ... 
  } 
  // 获取动画结束后参数回调 
  public getFinished(operation : NavigationOperation, isInPage : boolean) : () => void { 
    ... 
  } 
} 
 
// 自定义动画对象框架 
export class CustomTransitionFW { 
  // 各个页面自定义动画对象映射表 
  private customTransitionMap: Map<number, CustomTransition> = new Map<number, CustomTransition>() 
  ... 
  registerNavParam(ct : CustomTransition): void { 
    ... 
    this.customTransitionMap.set(ct.pageID, ct); 
  } 
 
  unRegisterNavParam(pageId: number): void { 
    ... 
    this.customTransitionMap.delete(pageId); 
  } 
 
  getAnimateParam(pageId: number): CustomTransition { 
    ... 
    return this.customTransitionMap.get(pageId) as CustomTransition; 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

Step2：配置Navigation的customNavContentTransition属性，当返回undefined时，使用系统默认动画。

build() { 
  Navigation(this.pageStack){ 
    ... 
  }.hideTitleBar(true) 
  .hideToolBar(true) 
  .navDestination(this.pageMap) 
  .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => { 
    // 对于Dialog型的页面，此处统一做了自定义动画的屏蔽，若需要动画，可以不做此判断。 
    if (from.mode == NavDestinationMode.DIALOG || to.mode == NavDestinationMode.DIALOG) { 
      console.error(`==== no transition because Dialog`); 
      return undefined; 
    } 
    let pageIn : CustomTransition | undefined; 
    let pageOut : CustomTransition | undefined; 
    pageIn = CustomTransitionFW.getInstance().getAnimateParam(to.index) 
    pageOut = CustomTransitionFW.getInstance().getAnimateParam(from.index) 
    // 业务首页跳转时若没有自定义动画诉求，此处可以通过判断页面id是否为-1（-1表示Navigation根视图）进行跳出。 
    if (from.index === -1 || to.index === -1) { 
      return undefined; 
    } 
    // 创建自定义转场协议，各个页面都会根据协议中的配置进行转场，当返回undefined时，使用系统默认动画。 
    let customAnimation: NavigationAnimatedTransition = { 
      onTransitionEnd: (isSuccess: boolean)=>{ 
        ... 
      }, 
      transition: (transitionProxy: NavigationTransitionProxy)=>{ 
        ... 
      }, 
      timeout: 100, 
    }; 
    return customAnimation; 
  }) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

Step3：customNavContentTransition事件需要返回NavigationAnimatedTransition对象，具体的动画实现需要在NavigationAnimatedTransition的transition属性中实现。transition中通过各个页面在框架中注册的回调函数，配置框架需要的动画属性。案例中各个页面注册了PUSH\POP\REPLACE的各个阶段动画参数。此处需要注意由于Navigation根页面不在栈中，因此无法与NavDestination无法产生跳转联动，因此如果第一个入栈的页面也需要自定义动画，那么就需要判断pageId是否为-1（-1及表示为根视图），如果是-1则不就行动画设置。

let customAnimation: NavigationAnimatedTransition = { 
  ... 
  transition: (transitionProxy: NavigationTransitionProxy)=>{ 
  // 配置起始参数 
  if (pageOut != undefined && pageOut.pageID != -1) { 
  pageOut.getStart(operation, false)(); 
} 
if (pageIn != undefined && pageIn.pageID != -1) { 
  pageIn.getStart(operation, true)(); 
} 
// 执行动画 
animateTo({ 
  duration: 1000, 
  curve: Curve.EaseInOut, 
  onFinish: ()=>{ 
    if (pageOut != undefined && pageOut.pageID != -1) { 
      pageOut.getFinished(operation, false)(); 
    } 
    if (pageIn != undefined && pageIn.pageID != -1) { 
      pageIn.getFinished(operation, true)(); 
    } 
    transitionProxy.finishTransition(); 
  }}, ()=>{ 
  if (pageOut != undefined && pageOut.pageID != -1) { 
    pageOut.getEnd(operation, false)(); 
  } 
  if (pageIn != undefined && pageIn.pageID != -1) { 
    pageIn.getEnd(operation, true)(); 
  } 
}) 
} 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

Step4：在各个页面中定义动画回调，并往自定义动画框架中注册。并在组件onDisAppear生命周期中注销框架中的页面动画回调。

Step5：定义NavDestination的translate属性，已实现动画效果。

@Component 
export struct loginPageView { 
  ... 
  private pageId: number = 0; 
  @State transX: number = 0; 
  @State transY: number = 0; 
 
  aboutToAppear(): void { 
    this.pageId = this.pageStack.getAllPathName().length - 1; 
    let ct : CustomTransition = new CustomTransition(); 
    ct.pageID = this.pageId; 
    ct.onPushInStart = ct.onPushOutEnd = ct.onPopInStart = ct.onPopOutEnd = ct.onReplaceInStart = ct.onReplaceOutEnd = () => { 
      this.transX = -300; 
    } 
    ct.onPushInEnd = ct.onPushOutStart = ct.onPopInEnd = ct.onPopOutStart = ct.onReplaceInEnd = ct.onReplaceOutStart = () => { 
      this.transX = 0; 
    } 
    ct.onPushInFinish = ct.onPopInFinish  = ct.onReplaceInFinish = () => { 
      this.transX = 0; 
    } 
    ct.onPushOutFinish = ct.onPopOutFinish  = ct.onReplaceOutFinish = () => { 
      this.transX = -300; 
    } 
    // 将页面的动画效果注册到动画框架中 
    CustomTransitionFW.getInstance().registerNavParam(ct) 
  } 
 
  build() { 
    NavDestination(){ 
      ... 
    }.hideTitleBar(true) 
    .onDisAppear(()=>{ 
      // 组件销毁的时候，需要将页面的动画效果从框架中删除 
      CustomTransitionFW.getInstance().unRegisterNavParam(this.pageId) 
    }) 
    // 定义translate，已实现动画 
    .translate({x: this.transX, y: this.transY, z: 0}) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

共享元素转场

NavDestination之间可以通过geometryTransition实现共享元素转场。

起始页。

Step1：为需要实现共享元素转场的元素添加geometryTransition属性，id参数必须在两个NavDestination之间保持一致。

起始页代码。

复制

Column() { 
  Image($r('app.media.startIcon')) 
    .geometryTransition('1') 
  Text("起始页共享的图片") 
} 
.width(100) 
.height(100)1.
2.
3.
4.
5.
6.
7.

目的页代码。

Column() { 
  Image($r('app.media.startIcon')) 
    .geometryTransition('1') 
  Text("目的页共享的图片") 
} 
.width(200) 
.height(200)1.
2.
3.
4.
5.
6.
7.

Step2：animateTo方法发起页面跳转（push 或者 pop），触发共享元素转场动画执行。注意此处需要关闭页面默认的跳转动画。

Button('跳转目的页') 
  .width('80%') 
  .height(40) 
  .margin(20) 
  .onClick(() => { 
    animateTo({ duration: 1000 }, () => { 
      this.pageInfos.pushPath({ name: 'DestinationPage' }, false) 
    }) 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.