HarmonyOS学习之路--路由篇补充Navigator

Navigator

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方法来向目的页面传递参数。

再来看看NavigatorPageB的具体实现：

 import router from '@system.router'
  @Entry
  @Component
  export struct NavigatorPageB {
    build() {
      Column() {
       //点击的时候回返回NavigatorPageA 
        Navigator({ target: 'pages/NavigatorPageA' ,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