gKC28資訊網——每日最新資訊28at.com

想了解更多關于開源的內容，請訪問：gKC28資訊網——每日最新資訊28at.com

51CTO 鴻蒙開發者社區gKC28資訊網——每日最新資訊28at.com

https://ost.51cto.comgKC28資訊網——每日最新資訊28at.com

路由跳轉場景

頁面跳轉是路由最常用的能力，Navigation通過NavPathStack提供了諸多方法，下文以pushDestination方法為例，介紹Navigation的路由跳轉相關能力。gKC28資訊網——每日最新資訊28at.com

頁面間跳轉

NavPathStack提供了路由管理的能力，通過NavPathStack進行頁面跳轉，主要適用于頁面較多的應用。gKC28資訊網——每日最新資訊28at.com

Step1：創建NavPathStack對象pageStack，通常使用@Provide進行修飾，方便后續子組件通過@Comsumer獲取，以實現子頁面的路由跳轉。gKC28資訊網——每日最新資訊28at.com

也可以將pageStack傳入路由框架，以實現路由框架開發（后續路由框架章節會介紹）的開發。gKC28資訊網——每日最新資訊28at.com

@Entry @Component struct mainPageView {   @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()   ...   build() {     ...   } }

Step2：構建路由表pageMap，該方法通過@Builder進行修飾，通過傳入的pageName屬性，返回不同頁面。gKC28資訊網——每日最新資訊28at.com

@Entry @Component struct mainPageView {   @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()   @Builder   PageMap(pageName: string) {     if (pageName === 'loginPage') {       loginPageView()     } else if (pageName === 'mainPage') {       mainPageView()     }   }   build() {     ...   } }

Step3：在build創建Navigation組件（需要傳入pageStack參數），通過navDestination屬性傳入路由表pageMap，并通過pageStack.pushPath()實現頁面跳轉。gKC28資訊網——每日最新資訊28at.com

@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)     ...   } }

頁面間參數傳遞

Navigation的頁面間，通過NavPathInfo對象中的params屬性，實現從發起頁到目標頁的數據傳遞；通過onPop回調參數，實現處理目標頁面的返回。gKC28資訊網——每日最新資訊28at.com

Step1：構建NavPathInfo對象，輸入需要傳遞給目標頁面的參數。gKC28資訊網——每日最新資訊28at.com

params參數：將需要傳遞的數據封裝起來進行傳遞，無法傳遞對象里面的函數。具體的支持參數可以參考指南（）gKC28資訊網——每日最新資訊28at.com

onPop參數：目標頁面觸發pop時的返回，在回調中通過PopInfo.info.param獲取到返回的對象。gKC28資訊網——每日最新資訊28at.com

// 發起頁 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);  

Step2：目標頁通過“NavPathStack.getParamByIndex(0)”獲取到發起頁傳遞過來的參數gKC28資訊網——每日最新資訊28at.com

@Component export struct loginPageView {   @Consume('pageInfo') pageStack : NavPathStack;    aboutToAppear(): void {     this.loginParam = this.pageStack.getParamByIndex(0) as LoginParam;   }   ... }

Step3：目標頁通過NavPathStack.pop方法返回起始頁，其result參數用來傳遞需要返回給起始頁的對象。gKC28資訊網——每日最新資訊28at.com

@Component export struct loginPageView {   @Consume('pageInfo') pageStack : NavPathStack;   // 頁面構建的對象   private loginParam! : LoginParam;   ...   build() {     NavDestination(){       ...       Button('login').onClick( ent => {         // 將對象返回給起始頁         this.pageStack.pop(this.loginParam, true)       })     }   } }

跨模塊頁面跳轉

當應用模塊較多，需要使用HSP（HAR）進行多模塊開發，比如登錄模塊是一個獨立團隊開發，以HSP(HAR)的形式交付。此時主頁應當從mainPage跳轉到HSP（HAR）中的頁面，需要先導入模塊的自定義組件，將組件添加到pageMap中，再通過pushDestination進行跳轉。gKC28資訊網——每日最新資訊28at.com

Step1：從HSP（HAR）中完成自定義組件（需要跳轉的目標頁面）開發，講自定義組件申明為export。gKC28資訊網——每日最新資訊28at.com

@Component export struct loginPageInHSP {   @Consume('pageStack') pageStack: NavPathStack;   ...   build() {     NavDestination() {       ...     }   } }

Step2：在HSP（HAR）的index.ets中導出組件。gKC28資訊網——每日最新資訊28at.com

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

Step3：配置好HSP（HAR）的項目依賴后，在mainPage中導入自定義組件，并添加到pageMap中，即可正常調用。// 導入模塊目標頁自定義組件。gKC28資訊網——每日最新資訊28at.com

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)   } }

頁面轉場

默認轉場動畫

Navigation的pushXXX和pop方法中都帶有一個參數animated，將animated設置成false則會取消轉場動畫，路由到Dialog模式頁面或者路由出Dialog模式頁面是，均無轉場動畫，如果需要轉場動畫，可以通過自定義轉場動畫實現。gKC28資訊網——每日最新資訊28at.com

自定義轉場動畫

Navigation通過customNavContentTransition事件提供自定義轉場動畫的能力，當轉場開始時，通過回調函數告知開發者，告知此次動畫from（從哪來）、to（到哪去）、是Push、Pop亦或是Repalce。這里需要注意當為根視圖時，NavContentInfo的name值為undefined。gKC28資訊網——每日最新資訊28at.com

開發者可以在customNavContentTransition的回調函數中進行動畫處理，返回NavigationAnimatedTransition自定義轉場協議已實現自定義轉場。gKC28資訊網——每日最新資訊28at.com

NavigationAnimatedTransition對象中包含三個參數，timeout（動畫超時結束時間），transition（自定義動畫執行回調），onTransitionEnd（轉場完成回調），需要在transition方法中實現具體動畫邏輯。gKC28資訊網——每日最新資訊28at.com

由于自定義轉場參數是在Navigation層級，但是每個頁面都會有其特定的自定義轉場效果，因此需要定義一套轉場動畫框架，已實現在Navigation層面對框架進行統一管理，各個頁面通過實現框架提供的回調函數，將其特定的動畫效果傳遞給Navigation。gKC28資訊網——每日最新資訊28at.com

Step1：構建動畫框架，通過一個Map管理各個頁面自定義自定義動畫對象CustomTransition，CustomTransition對象提供了Push、Pop、Replace各個動畫階段的回調函數給各個頁面進行補充，此處將各個階段細分為In和Out，從而實現頁面進入和退出時不同的轉場效果。gKC28資訊網——每日最新資訊28at.com

// 自定義動畫對象，定義了Push、Pop、Replace各個動畫階段的回調函數。gKC28資訊網——每日最新資訊28at.com

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;   } }

Step2：配置Navigation的customNavContentTransition屬性，當返回undefined時，使用系統默認動畫。gKC28資訊網——每日最新資訊28at.com

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;   }) }

Step3：customNavContentTransition事件需要返回NavigationAnimatedTransition對象，具體的動畫實現需要在NavigationAnimatedTransition的transition屬性中實現。transition中通過各個頁面在框架中注冊的回調函數，配置框架需要的動畫屬性。案例中各個頁面注冊了PUSH/POP/REPLACE的各個階段動畫參數。此處需要注意由于Navigation根頁面不在棧中，因此無法與NavDestination無法產生跳轉聯動，因此如果第一個入棧的頁面也需要自定義動畫，那么就需要判斷pageId是否為-1（-1及表示為根視圖），如果是-1則不就行動畫設置。gKC28資訊網——每日最新資訊28at.com

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)();   } }) } }

Step4：在各個頁面中定義動畫回調，并往自定義動畫框架中注冊。并在組件onDisAppear生命周期中注銷框架中的頁面動畫回調。gKC28資訊網——每日最新資訊28at.com

Step5：定義NavDestination的translate屬性，已實現動畫效果。gKC28資訊網——每日最新資訊28at.com

@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})   } }

共享元素轉場

NavDestination之間可以通過geometryTransition實現共享元素轉場。gKC28資訊網——每日最新資訊28at.com

起始頁。gKC28資訊網——每日最新資訊28at.com

Step1：為需要實現共享元素轉場的元素添加geometryTransition屬性，id參數必須在兩個NavDestination之間保持一致。gKC28資訊網——每日最新資訊28at.com

起始頁代碼。gKC28資訊網——每日最新資訊28at.com

Column() {   Image($r('app.media.startIcon'))     .geometryTransition('1')   Text("起始頁共享的圖片") } .width(100) .height(100)

目的頁代碼。gKC28資訊網——每日最新資訊28at.com

Column() {   Image($r('app.media.startIcon'))     .geometryTransition('1')   Text("目的頁共享的圖片") } .width(200) .height(200)

Step2：animateTo方法發起頁面跳轉（push 或者 pop），觸發共享元素轉場動畫執行。注意此處需要關閉頁面默認的跳轉動畫。gKC28資訊網——每日最新資訊28at.com

Button('跳轉目的頁')   .width('80%')   .height(40)   .margin(20)   .onClick(() => {     animateTo({ duration: 1000 }, () => {       this.pageInfos.pushPath({ name: 'DestinationPage' }, false)     })   })

想了解更多關于開源的內容，請訪問：gKC28資訊網——每日最新資訊28at.com

51CTO 鴻蒙開發者社區gKC28資訊網——每日最新資訊28at.com

https://ost.51cto.comgKC28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-87498-0.htmlNavigation常見場景的解決方案

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 基于設置應用的應用權限、通知設置跳轉

下一篇： 時間序列數據處理，不再使用Pandas