HarmonyOS鸿蒙学习笔记Navigator组件实现页面路由跳转

Posted 2022-09-03 郭梧悠

在HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用一文中讲解了鸿蒙路由的使用方法，在这里分享另外一个具有路由跳转功能的组件Navigator。
该组件可以将UI组件包裹起来，点击被包裹的UI组件可以实现页面跳转的效果。
在本博文中将实现点击Text组件，实现从页面NavigatorPageA 跳转到NavigatorPageB页面的效果，同时将参数传给NavigatorPageB.

@Entry
@Component
export struct NavigatorPageA 
  build() 
    Column() 
      //点击跳转到NavigatorPageB页面
      Navigator( target: 'pages/NavigatorPageB' ) 
        Text("点击我跳转").fontSize(30).fontColor(Color.Blue)
      
      .params( text: "Hello" )//传递参数Hello

    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)//让图片水平居中
    .justifyContent(FlexAlign.Center)//让图片垂直居中
  

通过上面的代码可以看出：
1、通过配置Navigator的target属性来指定跳转的目的页面。
2、通过Navigator的params方法来向目的页面传递参数。
NavigatorPageA实现效果如如下：

再来看看NavigatorPageB的具体实现：

import router from '@system.router'

@Entry
@Component
export struct NavigatorPageB 
  build() 
    Column() 
     //点击的时候回返回NavigatorPageA 
      Navigator( target: 'pages/NavigatorPage' ,type:NavigationType.Back) 
        Text(router.getParams()['text'].toString()).fontSize(30).fontColor(Color.Red)
         //也可以通过router.getParams().text.toString()拿具体的值
         //Text(router.getParams().text.toString()).fontSize(30).fontColor(Color.Red)
      
    .width('50%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)//让图片水平居中
    .justifyContent(FlexAlign.Center)//让图片垂直居中
  

具体实现效果如下：

NavigatorPageB做了如下两个操作：
1、通过router.getParams()['text'].toString()或者router.getParams().text.toString()获取NavigatorPageA传来的参数
2、点击Text的时候返回NavigatorPageA，相当于点击了返回键。是因为NavigatorPageB页面中的Navigator配置了type:NavigationType.Back

参考资料：
Navigator官方资料
HarmonyOS鸿蒙学习笔记（2）路由ohos.router的使用