上海网页制作服务商,安徽网络推广和优化,出国看病网站开发,天津网站建设市场路由跳转场景
页面跳转是路由最常用的能力#xff0c;Navigation通过NavPathStack提供了诸多方法#xff0c;下文以pushDestination方法为例#xff0c;介绍Navigation的路由跳转相关能力。
页面间跳转
NavPathStack提供了路由管理的能力#xff0c;通过NavPathStack进行…路由跳转场景
页面跳转是路由最常用的能力Navigation通过NavPathStack提供了诸多方法下文以pushDestination方法为例介绍Navigation的路由跳转相关能力。
页面间跳转
NavPathStack提供了路由管理的能力通过NavPathStack进行页面跳转主要适用于页面较多的应用。
Step1创建NavPathStack对象pageStack通常使用Provide进行修饰方便后续子组件通过Comsumer获取以实现子页面的路由跳转。
也可以将pageStack传入路由框架以实现路由框架开发后续路由框架章节会介绍的开发。
Entry
Component
struct mainPageView { Provide(pageStack) pageStack: NavPathStack new NavPathStack() ... build() { ... }
}
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() { ... }
}
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) ... }
}
页面间参数传递
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);
Step2目标页通过“NavPathStack.getParamByIndex(0)”获取到发起页传递过来的参数
Component
export struct loginPageView { Consume(pageInfo) pageStack : NavPathStack; aboutToAppear(): void { this.loginParam this.pageStack.getParamByIndex(0) as LoginParam; } ...
}
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) }) } }
}
跨模块页面跳转
当应用模块较多需要使用HSPHAR进行多模块开发比如登录模块是一个独立团队开发以HSP(HAR)的形式交付。此时主页应当从mainPage跳转到HSPHAR中的页面需要先导入模块的自定义组件将组件添加到pageMap中再通过pushDestination进行跳转。
Step1从HSPHAR中完成自定义组件需要跳转的目标页面开发讲自定义组件申明为export。
Component
export struct loginPageInHSP { Consume(pageStack) pageStack: NavPathStack; ... build() { NavDestination() { ... } }
}
Step2在HSPHAR的index.ets中导出组件。
export { loginPageInHSP } from ./src/main/ets/pages/loginPageInHSP
Step3配置好HSPHAR的项目依赖后在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) }
}
页面转场
默认转场动画
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管理各个页面自定义自定义动画对象CustomTransitionCustomTransition对象提供了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: Mapnumber, CustomTransition new Mapnumber, 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时使用系统默认动画。
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; })
}
Step3customNavContentTransition事件需要返回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)(); }
})
}
}
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}) }
}
共享元素转场
NavDestination之间可以通过geometryTransition实现共享元素转场。
起始页Step1为需要实现共享元素转场的元素添加geometryTransition属性id参数必须在两个NavDestination之间保持一致。起始页代码。
Column() { Image($r(app.media.startIcon)) .geometryTransition(1) Text(起始页共享的图片)
}
.width(100)
.height(100)
目的页代码。
Column() { Image($r(app.media.startIcon)) .geometryTransition(1) Text(目的页共享的图片)
}
.width(200)
.height(200)
Step2animateTo方法发起页面跳转push 或者 pop触发共享元素转场动画执行。注意此处需要关闭页面默认的跳转动画。
Button(跳转目的页) .width(80%) .height(40) .margin(20) .onClick(() { animateTo({ duration: 1000 }, () { this.pageInfos.pushPath({ name: DestinationPage }, false) }) })
