在页面跳转时#xff0c;应该使用页面路由router#xff0c;在页面内的页面跳转时#xff0c;建议使用Navigation达到更好的转场动效…简介

Navigation是路由容器组件包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。

适用于模块内和跨模块的路由切换。

在页面跳转时应该使用页面路由router在页面内的页面跳转时建议使用Navigation达到更好的转场动效场景。

UI框架

.mode(NavigationMode.Auto)自适应(Auto)模式

API

通过titleMode属性设置标题栏模式分别有Mini模式和Full模式

Mini模式

通过menus属性进行设置。

支持Array和CustomBuilder两种类型。

Entry

resources/base/media/startIcon.png,action:

{}}build()

{}.title(主标题).titleMode(NavigationTitleMode.Full).menus([this.ToolTmp,this.ToolTmp,this.ToolTmp])}.width(100%).height(100%).backgroundColor(#F1F3F5)}

}工具栏

工具栏位于Navigation组件的底部通过toolbarConfiguration属性进行设置。

Entry

resources/base/media/startIcon.png,action:

{}}Toolbar:

{}.title(主标题).titleMode(NavigationTitleMode.Full).menus([this.ToolTmp,this.ToolTmp,this.ToolTmp]).toolbarConfiguration([this.Toolbar,this.Toolbar,this.Toolbar])}.width(100%).height(100%).backgroundColor(#F1F3F5)}

}路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack对象。

主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

NavPathStack

this.pageStack.pushPathByName(PageOne,

PageOne

Param)带返回回调的跳转跳转时添加onPop回调能在页面出栈时获取返回信息并进行处理。

this.pageStack.pushPathByName(PageOne,

PageOne

JSON.stringify(popInfo.result))

this.pageStack.pushDestinationByName(PageOne,

PageOne

this.pageStack.popToName(PageOne)

返回到根首页清除栈中所有页面

this.pageStack.replacePathByName(PageOne,

PageOne

this.pageStack.removeByName(PageOne)

this.pageStack.removeByIndexes([1,3,5])页面参数获取

获取栈中所有页面name集合

this.pageStack.getAllPathName()

this.pageStack.getParamByIndex(1)

this.pageStack.getParamByName(PageOne)

this.pageStack.getIndexByName(PageOne)页面转场

Navigation默认提供了页面切换的转场动画通过页面栈操作时会触发不同的转场效果Dialog类型的页面默认无转场动画Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

{this.pageStack.disableAnimation(true)

}单次关闭

NavPathStack()this.pageStack.pushPath({

name:

this.pageStack.pop(false)子页面显示类型

标准类型NavDestinationMode.STANDARD生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

弹窗类型NavDestinationMode.DIALOG显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期两者可以同时显示。

aboutToAppear在创建自定义组件后执行其build()函数之前执行NavDestination创建之前允许在该方法中改变状态变量更改将在后续执行build()函数中生效。

onWillAppearNavDestination创建后挂载到组件树之前执行在该方法中更改状态变量会在当前帧显示生效。

onAppear通用生命周期事件NavDestination组件挂载到组件树时执行。

onWillShowNavDestination组件布局显示之前执行此时页面不可见应用切换到前台不会触发。

onShownNavDestination组件布局显示之后执行此时页面已完成布局。

onWillHideNavDestination组件触发隐藏之前执行应用切换到后台不会触发。

onHiddenNavDestination组件触发隐藏后执行非栈顶页面push进栈栈顶页面pop出栈或应用切换到后台。

onWillDisappearNavDestination组件即将销毁之前执行如果有转场动画会在动画前触发栈顶页面pop出栈。

onDisappear通用生命周期事件NavDestination组件从组件树上卸载销毁时执行。

aboutToDisappear自定义组件析构销毁之前执行不允许在该方法中改变状态变量。

使用案例

NavPathStack();BuilderPageMap(path:

string)

{Button(直接跳转component_1界面(不带参数)).width(80%).margin({

bottom:

{this.pageNav.pushPathByName(component_1,

)})Button(直接跳转component_1界面(带参数)).width(80%).margin({

bottom:

1234567);this.pageNav.pushPathByName(component_1,

login)})}.title(主页).titleMode(NavigationTitleMode.Full).mode(NavigationMode.Auto).navDestination(this.PageMap)}.height(100%).width(100%)}

}component_1

{Text(账户:).fontSize(16).margin({

left:

{Text(密码:).fontSize(16).margin({

left:

}).type(InputType.Password).onChange((value)

{this.login.Password

{Button(注册).width(100%).backgroundColor(#f1f2f3).fontColor(#007dfe).onClick(()

{this.pageNav.pushPathByName(component_2,

this.login.Name,

popLogin;}});})}.width(50%).padding({

right:

{Button(登录).width(100%).onClick(()

{console.log(JSON.stringify(this.login))})}.width(50%).padding({

right:

}).width(100%).height(60)}.title(登录).mode(NavDestinationMode.STANDARD).onWillShow(()

{let

this.pageNav.getParamByName(component_1)

LoginParam[]

LoginParam})}.width(100%).height(100%)}

}component_2

{Text(账户:).fontSize(16).margin({

left:

{Text(密码:).fontSize(16).margin({

left:

}).type(InputType.Password).onChange((value)

{this.login.Password

{Text(确认密码:).fontSize(16).margin({

left:

}).type(InputType.Password).onChange((value)

{this.tempPassword

{Button(注册).width(100%).onClick(()

{if

{promptAction.showDialog({title:

提示,message:

#000}]})}})}.width(100%).margin({

top:

})}.title(注册).mode(NavDestinationMode.STANDARD).onWillShow(()

{let

this.pageNav.getParamByName(component_2)

string[];if

names[0]})}.width(100%).height(100%)}

}LoginParam