【高心星出品】
文章目录
- Navigation实现页面路由
- 完整的Navigation
- 入口页面
- 子页面
- 页面跳转
- 路由拦截
- 其他的
Navigation实现页面路由
Navigation：路由导航的根视图容器，一般作为页面（@Entry）的根容器去使用，包括单页面（stack）、分栏（split）和自适应（auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。
- Title：标题栏，通过title属性对标题栏进行设置。通过menus配置菜单
- NavContent：内容区域，默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
- ToolBar：工具栏，通过toolbarConfiguration实现对工具栏的配置，如果不配置此属性，ToolBar不显示。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
- NavDestination：作为子页面的根容器，用于显示Navigation的内容区。具备两种类型：STANDARD（标准类型，NavDestination的生命周期跟随NavPathStack栈中标准NavDestination变化而改变），DIALOG（默认透明。不影响其他NavDestination的生命周期）。
- NavPathStack：Navigation路由栈，由于管理NavDestination组件的路由跳转。推荐使用NavPathStack配合navDestination属性进行页面路由。
完整的Navigation
要求入口页面必须是Navigation组件作为容器，子页面必须是NavDestinnation组件作为容器。由于我们将页面内容区的页面都添加了页面栈，所以在子页面拿到页面栈之后也可以实现子页面之间跳转。
入口页面
import { page1 } from '../viewmodel/page1'
import { page2 } from '../viewmodel/page2'
@Entry
@Component
struct Index {
// 菜单栏
private menuitems:NavigationMenuItem[]=[
{
value:'菜单1',
icon:'resources/base/media/startIcon.png',
action:()=>{}
},
{
value:'菜单2',
icon:'resources/base/media/startIcon.png',
action:()=>{}
}
]
// 工具栏
private toolbaritems:ToolbarItem[]=[
{
value:'工具1',
icon:$r('app.media.startIcon'),
action:()=>{}
},
{
value:'工具2',
icon:$r('app.media.startIcon'),
action:()=>{}
},
{
value:'工具3',
icon:$r('app.media.startIcon'),
action:()=>{}
},
{
value:'工具4',
icon:$r('app.media.startIcon'),
action:()=>{}
}
]
// 页面路由栈
@Provide('pathstack') pathstack:NavPathStack=new NavPathStack()
// 内容页
@Builder
pagemap(pagename:string){
if(pagename=='page1'){
page1()
}else if(pagename=='page2'){
page2()
}
}
build() {
Navigation(this.pathstack){
Column({space:20}){
Text('page1').fontSize(28).padding(10).border({width:2,color:Color.Red})
.onClick(()=>{
this.pathstack.pushPath({name:'page1'})
})
.width('100%')
Text('page2').fontSize(28).padding(10).border({width:2,color:Color.Red})
.onClick(()=>{
this.pathstack.pushPath({name:'page2'})
})
.width('100%')
}.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
// 标题栏
.title('主标题')
// 菜单栏
.menus(this.menuitems)
// 工具栏
.toolbarConfiguration(this.toolbaritems)
// 内容页
.navDestination(this.pagemap)
}
}
子页面
/**
*作者：gxx
*时间：2024/10/24 10:13
*功能：
**/
@Component
export struct page1 {
// 子页面拿到页面栈
@Consume('pathstack') pathstack:NavPathStack
private menuitems: NavigationMenuItem[] = [
{
value: '菜单1',
icon: 'resources/base/media/startIcon.png',
action: () => {
}
},
{
value: '菜单2',
icon: 'resources/base/media/startIcon.png',
action: () => {
}
}
]
build() {
NavDestination() {
Column() {
Text('page1').fontSize(28).fontWeight(FontWeight.Bolder)
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}.title('页面标题')
.menus(this.menuitems)
}
}
页面跳转
普通页面跳转
pushpath和replacepath都可以实现页面跳转，他们的区别就是在页面栈中覆盖页面还是替换页面的区别，replacepath无法实现pop回调，因为当前页在跳转的时候已经被销毁。
// 子页面之间也可以跳转
this.pathstack.replacePath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})
this.pathstack.pushPath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})
这里面的onpop是可选参数，如果设置了意味着在目标页可以通过调用页面栈的pop方法回到当前页，并且将返回值带过来，相当于带返回值的跳转。
.onBackPressed(()=>{
this.pathstack.pop(result)
return true
})
此处result为目标页返回给当前页的返回值。
跳转携带数据
跳转的时候可以携带数据，通过param可以设置这些数据，并在目标页中获取。
.onClick(()=>{
this.pathstack.pushPath({name:'page1',param:'来自首页的信息'})
})
这里携带了字符串类型的数据作为param。
.onReady((cxt)=>{
let param= cxt.pathInfo.param as string
promptAction.showToast({message:param})
})
可以在子页面的NavDestination的onready中获取携带过来的数据。
路由拦截
路由跳转中可以进行拦截处理，常用于路由重定向。比如主页面跳转到page1的时候，携带的数据为page2，重定向到page2.
.onClick(()=>{
this.pathstack.pushPath({name:'page1',param:'page2'})
})
在首页跳转到page1页面。
aboutToAppear(): void {
// 设置拦截器
this.pathstack.setInterception({
willShow:(from:NavDestinationContext|NavBar,to:NavDestinationContext|NavBar)=> {
// 回到主页面的时候to是navbar
if (typeof to == 'string') {
return
} else {
let cxt = to as NavDestinationContext
// 如果跳转到page1 但是携带数据是page2 就跳转到page2
if (cxt.pathInfo.name == 'page1') {
if (cxt.pathInfo.param == 'page2') {
//移除page1
this.pathstack.pop()
this.pathstack.pushPath({ name: 'page2',param:'pagex' })
}
}
}
}
})
}
在主页定义了页面栈的拦截器，只要跳转的目标是page1并且携带了数据page2，就将page1移除，重定向到page2，就相当于从主页直接跳转到了page2.
其他的
在主页中可以设置标题为mini并关闭后退按钮，从而保持界面统一化。
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)
在子页中可以在生命周期方法onReady中拿到当前子页的上下文环境context，里面包含了页面路由的相关信息。
.onReady((cxt)=>{
let param= cxt.pathInfo.param as string
promptAction.showToast({message:param})
})
在子页中点击后退图标或者按后退键都是执行了NavDestination的onBackpress生命周期函数，我们可以重写该函数。
.onBackPressed(()=>{
this.pathstack.pop('gxx')
return true
})
