HamronyOS开发5.0【路由容器之Navigation】 全面解析

什么是Navigation?

Navigation是ArkUI中的路由容器组件,一般作为首页的根容器,适用于模块内和跨模块的路由切换。支持一次开发,多端部署场景。

Navigation组件适用于模块内页面切换,通过组件级路由能力实现更加自然流畅的转场体验,是官方推荐的导航组件(相较于Router,Navigation的支持面更广,也更适合实现一多,所以建议使用Navigation)。

看到这里,很多iOS开发者可能比较熟悉,这个组件类似于iOS中的UINavigationController,可以用于根控制器实现页面的跳转和传值,同时可以实现系统或自定义标题栏、导航Item等,我们可以在Navigation中看到这些特性。

Navigation的组成

Navigation包含导航页(NavBar)和子页(NavDestination)。 导航页又包含以下三个部分:

  • 标题栏(Titlebar,包含菜单栏menu):通过title属性设置标题。
  • 内容区(Navigation子组件):默认首页显示导航内容(Navigation的子组件)或非首页显示(NavDestination的子组件),首页和非首页通过路由进行切换。
  • 工具栏(Toolbar):通过toolbarConfiguration实现对工具栏的配置。

1

上图所示为单页面模式布局示意图,左边为导航页,右边为子页,可以通过路由转换实现页面跳转。

  1. 标题栏

2

  1. 菜单栏

3

  1. 工具栏

4

路由跳转

5

Navigation路由跳转相关操作是基于页面栈NavPathStack提供的方法进行,每个Navigation都需要创建并传入一个NavPathStack对象,用于管理页面。

NavPathStack通过push()pop()remove()等操作控制页面的入栈和出栈,从而完成页面的切换。

路由跳转的方式:

1. 跳转

  • 通过页面的name去跳转,并可以携带参数;
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  • 带返回回调的跳转,跳转时添加onPop回调,能在页面出栈时获取返回信息,并进行处理;
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
    console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});
  • 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {
    console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {
    console.error('Push destination succeed.');
});

2. 返

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值