鸿蒙第13篇——导航Navigation

ArkUI 中提供了两种方式实现应用内的页面跳转： Navigation组件和页面路由。

1. Navigation组件，提供组件级的导航能力，通过声明式 UI 语法构建页面结构，是Harmony 推荐的首选方式；
2. 页面路由： 由 Router 模块提供的API实现， 通过URL进行页面跳转。

先了解一下 开发者文档中心

Navigation组件

Navigation是路由导航的根容器。一般作为Page页面的根容器使用， 其内部默认包括标题栏、内容区、工具栏。
其中内容区 默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。 以下是一个关系图：

相关文档来源：
指南与API参考 > API参考 > 应用框架 > ArkUI（方舟UI框架）> ArkTS组件 > 导航与切换 > Navigation

1.创建Navigation组件

直接使用Navigation() 创建Navigation组件， 或者同时绑定NavPathStack路由栈，代码如下：

Navigation(pathInfos: NavPathStack)

2. 用法

2.1 NavPathStack 的基础用法

NavPathStack 通过 Push 相关的接口实现页面跳转功能，
通过 Pop 相关接口实现页面返回功能，
通过 Replace 相关接口实现页面替换功能，
通过 Remove 相关接口实现删除页面栈中特定页面的功能，
通过 Get 相关接口获取页面参数。

2.2实例

下面通过一个实例来了解 如何使用Navigation 、NavPathStack实现页面跳转

第一步， 创建Index.ets文件， 实现效果图如下：

代码如下：

@Entry
@Component
struct Index {
   
   
  //创建页面栈
  pageInfos : NavPathStack = new NavPathStack()

  build() {
   
   
    //创建Navigation, 绑定NavPathStack 路由栈
    Navigation(this.pageInfos){
   
   
      Column(){
   
   
        Button('打开页面1', {
   
   stateEffect : true , type : ButtonType.Capsule})
          .width('90%')
          .height(45)
          .margin(20)
          .onClick(() =>{
   
   
            // 将name指定的NavDestination页面信息入栈
            this.pageInfos.pushPath({
   
   name : 'pageOne'})
          })

        Button('打开页面2',{
   
   stateEffect:true,type : ButtonType.Capsule})
          .width('90%')
          .height(45)
          .backgroundColor(Color.Brown)
          .margin(20)
          .onClick(() =>{
   
   
            // 将按名称指定的NavDestination页面信息推送到堆栈上，并将数据作为参数传递。
            this.pageInfos.pushPathByName('pageTwo',null)
          })
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

第二步 创建PageOne.ets文件， 实现如下效果

代码如下：

export class TempClass{
   
   
  count : 

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/aduovip/article/details/168770839