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

Posted 2022-11-30 郭梧悠

在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也支持传递对象，比如定义一个商品类：

let NextId = 0;
export class GoodsData 
  id: string;
  title: string;
  content: string;
  price: number;
  imgSrc: Resource;

  constructor(title: string, content: string, price: number, imgSrc: Resource) 
    this.id = `$NextId++`;
    this.title = title;
    this.content = content;
    this.price = price;
    this.imgSrc = imgSrc;
  

比如商品里列表页点击进入商品详情页：

@Component
struct GoodsListItem 
  //商品信息类
  private goodsItem: GoodsData

  build() 
  //点击跳转行情
    Navigator( target: 'pages/ShoppingDetail' ) 
        //省略布局文件
    
    .params( goodsData: this.goodsItem )
    .margin( right: 5)
  

那么商品详情页就可以这么写：

@Entry
@Component
struct ShoppingDetail 
  //获取商品数据，使用as语法将数据转换成GoodsData对象
  private goodsItem: GoodsData = router.getParams()['goodsData'] as GoodsData;
  build() 
      Column() 
          //显示名称
           Text(this.goodsItem.title).fontColor(Color.Green).fontSize(30)
    
  

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