Navigation是路由容器组件,一般作为首页的根容器,包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上,Navigation组件能够自适应显示大小,自动切换分栏展示效果。
Navigation组件主要包含导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar,包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成,其中导航页可以通过hideNavBar属性进行隐藏,导航页不存在页面栈中,导航页和子页,以及子页之间可以通过路由操作进行切换。
在API Version 9上,需要配合NavRouter组件实现页面路由,从API Version 10开始,推荐使用NavPathStack实现页面路由。
本篇文章只讲解Navigation通过NavPathStack进行跳转
导航页(也就是首页)用Navigation作为根布局,子页面(要跳转的目标页面)用 NavDestination作为根布局
首页中的Navigation()需要绑定NavPathStack栈
//主页面(PageOne)
//栈对象,通过Nav栈进行跳转
pageInfos: NavPathStack = new NavPathStack()
Navigation(this.pageInfos) {
...
Button()
.onClick(() => {
//点击按钮,将PageTwo页面入栈并进行跳转
this.pageInfos.pushPath({ name: 'pageTwo' })
})
}
//隐藏标题栏
.hideTitleBar()
//子页面(PageTwo)
NavDestination() {
...
}
在跳转之前需要在app/entry/src/main/resources/base/profile中新建文件route_map.json文件名可以随意,在文件中对子页面进行注册,并在PageTwo文件中写一个builder方法,最后在app/entry/src/main/module.json5,module.json5中绑定route_map.json,最后可以完成跳转
//route_map.json
{
"routerMap": [
{
//该name是跳转时pushpath里面传的name
"name": "pageTwo",
//PageTwo页面路径,只支持src/main开头
"pageSourceFile": "src/main/ets/pages/PageTwo.ets",
//PageTwo页面中的build方法
"buildFunction": "PageTwoBuilder"
}
]
}
//pageTwo.ets
//此处的方法名与上方json文件方法名一致
@Builder
export function PageTwoBuilder(name: string, param: Object) {
PageTwo()
}
@Entry
@Component
export struct PageTwo {
...
}
//module.json5
{
"module": {
"routerMap": "$profile:route_map"
}
}
在我们从PageOne页面跳转到PageTwo页面之后,我们要将PageOne中的NavPathStack对象传递给PageTwo,以保证主页面与子页面是同一栈,也方便PageTwo以后跳转到PageThree
//PageTwo.ets
@Entry
@Component
export struct PageTwo {
nav : NavPathStack = new NavPathStack()
build(){
NavDestination(){
...
}.onReady((context: NavDestinationContext) => {
//将上个页面的NavPathStack对象赋值给当前页面
this.nav = context.pathStack
})
}
}
提示主页面是无法入栈的,只能主页面跳子页面或者子页面之间互相跳转
具体的其他跳转Api以及传值在这里就不概括了,具体可以参考华为官方文档进行开发Navigation-基础组件-ArkTS组件-ArkUI(方舟UI框架)-应用框架 | 华为开发者联盟 (huawei.com)