鸿蒙app开发·Navigation组件

Navigation定义：主要用于实现页面间以及组件内部的页面跳转，支持在不同组件间传递跳转参数。其分为导航页和子页，导航页又叫Navbar，是Navigation包含的子组件，子页是NavDestination包含的子组件。

简单实现：

①根页面代码（注释版：可以实现多层跳转）

@Entry  // 标记为入口组件，表示这是应用的根组件
@Component  // 标记为自定义组件
struct Navigation1 {
  // 使用@Provide装饰器提供NavPathStack实例，命名为'stack'
  // 这个栈将被用于管理导航路径，并可以被子组件访问
  @Provide('stack') stack: NavPathStack = new NavPathStack()

  build() {
    // 创建Navigation组件，传入路径栈实例
    Navigation(this.stack) {
      // Navigation的子组件，这里是一个Text组件
      Text("hello word")
        .backgroundColor(Color.Red)  // 设置背景色为红色
        .fontSize(36)  // 设置字体大小为36
        .onClick(() => {  // 点击事件处理
          try {
            // 点击时尝试推入新路径
            // 参数说明：
            // 'Navigation2' - 目标页面名称
            // '你好世界' - 传递给目标页面的参数
            // true - 是否启用页面转场动画
            this.stack.pushPathByName('Navigation2', '你好世界', true)
          } catch (e) {
            // 捕获并打印可能的错误
            console.error('this is error:', JSON.stringify(e))
          }
        })
    }
    // Navigation组件的属性设置
    .title('标题')  // 设置导航栏标题
    .titleMode(NavigationTitleMode.Mini)  // 设置标题显示模式为Mini
    .hideBackButton(true)  // 隐藏返回按钮
  }
}

②目标页面代码（注释版）

// 定义一个页面构建器装饰器，用于创建Navigation2实例
@Builder
export function PageBuilder() {
  Navigation2() // 创建Navigation2组件实例
}

// 导航目标页面组件
@Component
export struct Navigation2 {
  // 页面名称状态变量，用于动态显示标题
  @State name: string = '';

  // 通过@Consume装饰器共享父组件提供的NavPathStack实例
  @Consume('stack') stack: NavPathStack;

  build() {
    // 创建导航目标容器
    NavDestination() {
      // 这里可以添加页面内容组件
      // 例如：Text(this.name).fontSize(20)
    }
    .width('100%')    // 设置宽度100%
    .height('100%')   // 设置高度100%

    // 页面准备就绪通过上下文获取参数
    .onReady((context: NavDestinationContext) => {
      try {
        // 从导航上下文中获取传递的参数
        this.name = context.pathInfo.param as string;
        console.log('接收到的参数:', JSON.stringify(context.pathInfo.param));

        // 检查参数有效性
        if (typeof this.name !== 'string') {
          console.error('无效的参数类型:', typeof context.pathInfo.param);
          this.name = '默认标题'; // 设置默认值
        }
      } catch (e) {
        console.error('参数解析错误:', JSON.stringify(e));
        this.name = '错误页面';
      }
    })

    // 设置导航栏标题（动态绑定name状态变量）
    .title(this.name)

    // 可添加的其他导航配置
    .hideBackButton(false) // 显示返回按钮
  }
}

③配置页面参数关系

资源文件参数：

a、在resources/base/profile目录下新建json文件：

{
  "routerMap": [
    {
      "name": "Navigation2",
      "pageSourceFile": "src/main/ets/pages/Navigation2.ets",
      "buildFunction": "PageBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}

b、module.json5文件“module”模块中加入：

"routerMap": "$profile:nav_map",

④跳转与参数的接收

跳转：参数是字符串/自定义复杂类型

@Provide('stack') stack: NavPathStack = new NavPathStack()
...
this.stack.pushPathByName('Navigation2', 参数, true)

接收：①通过NavDestinationContext上下文获取‘param’参数

@Consume('stack') stack: NavPathStack;
...
NavDestination() {}
    .onReady((context: NavDestinationContext) => {
        // 从导航上下文中获取传递的参数
        this.name = context.pathInfo.param as 类型;}

②通过NavPathStack接收

@Consume('stack') stack: NavPathStack;
...

NavDestination() {}
    .onReady(() => {

this.massge = this.stack.getParamByName('Navigation2')[0]

}）

扩展：

除了使用路由配置文件进行跳转，Navigation还支持使用属性navDestination进行pageMap 跳转，无需创建 router_map.json 文件，重点集中在 @Builder 函数上（仅适用于一层跳转）。

根页面代码如下：

// 导入Page1Builder构建器
import {Page1Builder} from "./page1"

@Entry  
@Component
struct Index {
  @State message: string = 'Hello World1111';
  @Provide stack: NavPathStack = new NavPathStack()  // 提供导航路径栈实例，用于管理页面栈

  // 页面映射构建器，根据页面名称返回对应的页面组件
  @Builder
  pageMap(pageName: string) {
    if (pageName === 'page1') {
      // 如果页面名称是'page1'，则返回Page1Builder构建的页面
      Page1Builder()
    }
    // 可以继续添加其他页面的判断...
  }

  build() {
    // 使用Navigation组件作为根布局
    Navigation(this.stack) {
      // 定义一个按钮，点击后跳转到page1页面
      Button(this.message)
        .onClick(() => {
          // 使用pushPathByName方法导航到名为'page1'的页面
          // 参数说明：
          // 第一个参数：目标页面名称
          // 第二个参数：可选，传递给目标页面的参数
          // 第三个参数：可选，导航模式
          this.stack.pushPathByName('page1', null, null)
        })
    }
    .height('100%')
    .width('100%')
    .navDestination(this.pageMap)  // 设置页面映射关系，将页面名称映射到实际组件
  }
}

子路由页面：

// 页面组件定义
@Component
struct Page {
  @State message: string = 'Hello World222';
  @Consume stack: NavPathStack  // 消费上层提供的导航栈实例

  build() {
    // 使用NavDestination作为页面容器
    NavDestination() {
      Button(this.message)
        .onClick(() => {
          // 调用导航栈的pop方法返回上一页
          this.stack.pop()
        })
    }
    .width('100%')
    .height('100%')
  }
}

// 页面构建器导出函数
@Builder export function Page1Builder() {
  // 返回Page组件实例
  Page()
}

未完待添加