鸿蒙开发笔记-Navigation基本使用

最新推荐文章于 2024-11-02 15:22:06 发布

鸿蒙笔记

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量603

点赞数 21

文章标签：笔记鸿蒙

本文链接：https://blog.csdn.net/2301_79082288/article/details/141535872

版权

一、涉及的文件

Index.ets 一级页面
TestPage.ets 二级页面
main_pages.json配置页面信息
router_map.json新建的文件，文件名可以任取，但是要和module.json中的对应
module.json在module字段下配置： “routerMap”: “$profile:router_map”,

在这里插入图片描述

二、main_page.json涉及代码

在这里插入图片描述

三、router_map.json涉及的配置

在这里插入图片描述

四、module.json的配置

在这里插入图片描述

五、一级页面代码

@Entry
@Component
struct Index {
  //路由栈实例
  navPathStack: NavPathStack = new NavPathStack()

  build() {
    //路由栈实例传给 Navigation
    Navigation(this.navPathStack) {
      Column() {
        Text('一级页面')
        Button('跳转到下一个页面')
          .onClick(() => {
            //10和20为传递给下一个页面的参数
            //TestPage 需要与 router_map.json中的name一致
            //this.navPathStack.pushPath({ name: 'TestPage', param: 10 })
            this.navPathStack.pushPathByName('TestPage', 20)
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

六、二级页面代码

//myFunction 需要与 router_map.json 中的 buildFunction 一致
@Builder
export function myFunction() {
  TestPage()
}

@Entry
@Component
struct TestPage {
  //准备接收上个页面的任务栈实例
  navPathStack: NavPathStack = new NavPathStack()
  //接收传递来的参数
  @State index: number = 0;

  build() {
    NavDestination() {
      Column() {
        Text('二级页面')
        Text(`传递来的参数：${this.index}`)
        Button('返回')
          .onClick(() => {
            this.navPathStack.pop()
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }.hideTitleBar(true) //隐藏NavDestination带的标题栏
    .onReady((context: NavDestinationContext) => {
      //接收上一级页面传递来的路由栈
      this.navPathStack = context.pathStack
      //获取参数
      this.index = context.pathInfo.param as number
    })
  }
}