HO与OH差异之Navigation二

BensionLZ
23 阅读2分钟

在上一篇章中我们先了解了一种HO(HarmonyOS)与OH(OpenHarmony)Navigation的差异，但是其实OH中还给我们提供了更多的跳转方式，今天我们来介绍一下OH与HO差异之二。

HarmonyOS我都简称为HO，OpenHarmony简称为OH。

其中在HO的Navigation中给我们使用的更为便捷但是OH中虽然与HO中有些差异但是大体还是差不多的，OH中还给我们提供了另外几种从Navigation派生出来的跳转方式，这里我们先了解一下Navigator。

Navigator简介：路由容器组件，提供路由跳转能力。可以包含子组件。

Navigator(value?: {target: string, type?: NavigationType})

其中在Navigator中只能包含一个子组件，也就是说如果我们写了一个Text又加上另外一个组件的话，它会直接报错。

接下来我们直接上代码进行演示：为了大家方便理解我会用最为简洁的代码为大家展示

live.csdn.net/v/470933

@Entry
@Component
struct NavigatorPage {

  build() {
    Flex() {
      Navigator({ target: "pages/Navigation/NavigatorPage2" , type: NavigationType.Push}) {
        Column() {
          Button("点击进行Navigator跳转")
        }
        .justifyContent(FlexAlign.Center)
      }
      Text("我是Navigator主界面")
    }
  }
}

@Entry
@Component
struct NavigatorPage2 {

  build() {
    Flex() {
      Navigator({ target: "pages/Navigation/NavigatorPage" , type: NavigationType.Back}) {
        Column() {
          Text("点击进行返回")
        }.width("100%").height("100%")
        .justifyContent(FlexAlign.Center)
      }
      Text("我是Navigator2页面")
    }
  }
}

其中从代码及演示视频中我们可以看的出来他和Navigation跳转的差异，他跳转后的页面并没有"天然的"有返回的按钮，并且它需要跳转的子页面也必须是@Entry修饰的界面，也就是他这种方式更偏向于深度跳转。处于Navigator容器下的所有内容点击之后都会进行跳转。如下示例代码：

@Entry
@Component
struct NavigatorPage {

  build() {
    Flex() {
      Navigator({ target: "pages/Navigation/NavigatorPage2" , type: NavigationType.Push}) {
        Column() {
          Button("点击进行Navigator跳转")
          Text("外婆也可以进行Navigator跳转")
        }
        .justifyContent(FlexAlign.Center)
      }
      Text("我是Navigator主界面")
    }
  }
}

@Entry
@Component
struct NavigatorPage2 {

  build() {
    Flex() {
      Navigator({ target: "pages/Navigation/NavigatorPage" , type: NavigationType.Back}) {
        Column() {
          Text("点击进行返回")
          Button("我也可以进行返回")
          Text("我也可以进行返回")
        }.width("100%").height("100%")
        .justifyContent(FlexAlign.Center)
      }
      Text("我是Navigator2页面")
    }
  }
}

从代码和演示图片中我们便可以知道处于Navigator下的内容点击都可以进行跳转。

Harmony OS NEXT / OpenHarmony API12

本次就暂时介绍这么多， 在下一篇内容中我会给大家介绍一下样式复用的修饰器

谢谢各位的观看，有错误不足的地方， 本人乐于接受各位的意见

avatar
文章
阅读
粉丝