在这篇文章中,将逐步的介绍,如何通过Navigation进行页面间的切换。
1、页面跳转的准备工作
首先,开发者需要创建一个NavPathStack对象并作为构造入参传给Navigation组件,以实现二者的绑定,后续的路由操作均基于该NavPathStack展开。
// BasicNavigation.ets
@Component
struct BasicNavigation {
stack: NavPathStack = new NavPathStack()
build() {
// 将导航控制器NavPathStack 绑定至Navigation中。
Navigation(this.stack) {
// Navigation作为路由根容器,可以不显示任何内容
}
}
}
此时我们已经构建好了一个Navigation根容器并绑定了导航控制器NavPathStack,接下来我们需要构建显示的页面。
Step1、构建子页面
为每个NavDestination声明对外的实例化方法,如代码中的PageOneBuilder,执行该方法会创建一个BasicNavDestination的自定义组件,该组件就是一个Navigation的子页面。
// BasicNavDest.ets
// 组件实例化方法,该方法会创建BasicNavDestination自定义组件作为Navigation的页面
@Builder
export function PageOneBuilder() {
BasicNavDestination({
name: 'pageOne'
});
}
// NavDestination组件
@Component
struct BasicNavDestination {
name: string = 'NA'
build() {
NavDestination() {
// 页面中的内容
}
}
}

最低0.47元/天 解锁文章
1106

被折叠的 条评论
为什么被折叠?



