HarmonyOS Navigation实现导航与路由切换

简介: HarmonyOS Navigation实现导航与路由切换

本文主要介绍在HarmonyOS下如何使用Navigation和NavDestination来实现导航与路由切换。

Navigation和NavDestination概述

Navigation组件是路由导航的根视图容器,一般作为Page页面的根容器使用,其内部默认包含了标题栏、内容区和工具栏,其中内容区默认首页显示导航内容(Navigation的子组件)或非首页显示(NavDestination的子组件),首页和非首页通过路由进行切换。

从API Version 10开始,推荐使用NavPathStack配合navDestination属性进行页面路由。

创建应用

创建一个名为“ArkTSNavigation”的ArkTS应用作为演示。完整源码见文末。

首页

修改src/main/ets/pages/Index.ets,内容如下:

@Entry
@Component
struct Index {
   
  @State message: string = '主页';

  // 创建一个导航控制器对象并传入Navigation
  pageInfos: NavPathStack = new NavPathStack();

  build() {
   
    Navigation(this.pageInfos) {
   
      Column() {
   
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
   
            center: {
    anchor: '__container__', align: VerticalAlign.Center },
            middle: {
    anchor: '__container__', align: HorizontalAlign.Center }
          })

        Button('导航到第一页')
          .width(128).height(28)
          .onClick(() => {
   
            // 跳转页面时不携带参数
            this.pageInfos.pushPathByName('pageOne', null);
          })

        Button('导航到第二页')
          .width(128).height(28)
          .onClick(() => {
   
            // 跳转页面时携带参数
            this.pageInfos.pushPathByName('pageTwo', "Page Two");
          })
      }
      .height('100%')
      .width('100%')
    }
    .mode(NavigationMode.Auto)
  }
}

上述页面

  • 通过NavPathStack来初始化Navigation。NavPathStack是Navigation路由栈,允许被继承。开发者可以在派生类中新增属性方法,也可以重写基类NavPathStack的方法。派生类对象可以替代基类NavPathStack对象使用。
  • 设置了两个按钮,点击按钮会跳转到不同的页面。通过pushPathByName等路由接口进行页面跳转。其中一个按钮会跳转到一个新页面,不并携带参数;另一个按钮会跳转到一个新页面,并携带参数内容为“Page Two”。

第一个子页面

新建src/main/ets/pages/PageOne.ets

@Builder
export function PageOneBuilder(name: string, param: Object) {
   
  PageOne()
}

@Component
export struct PageOne {
   
  @State message: string = '第一页';
  pageInfos: NavPathStack = new NavPathStack();

  build() {
   
    NavDestination() {
   
      RelativeContainer() {
   
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
   
            center: {
    anchor: '__container__', align: VerticalAlign.Center },
            middle: {
    anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .height('100%')
      .width('100%')
    }
    .title('PageOne')
    .onReady((context: NavDestinationContext) => {
   
      this.pageInfos = context.pathStack;
    })
  }
}

通过@Builder定义的函数PageOneBuilder来构建PageOne。函数名称需要和route_map.json配置文件中的buildFunction保持一致,否则在编译时会报错。

NavDestination作为子页面的根容器,用于显示Navigation的内容区。

当切换到该界面时,会显示页面内容“第一页”。

第二个子页面

新建src/main/ets/pages/PageTwo.ets

@Builder
export function PageTwoBuilder(name: string, param: Object) {
   
  PageTwo()
}

@Component
export struct PageTwo {
   
  @State message: string = '第二页';
  pageInfos: NavPathStack = new NavPathStack();

  build() {
   
    NavDestination() {
   
      RelativeContainer() {
   
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
   
            center: {
    anchor: '__container__', align: VerticalAlign.Center },
            middle: {
    anchor: '__container__', align: HorizontalAlign.Center }
          })
      }
      .height('100%')
      .width('100%')
    }
    .title('PageTwo')
    .onReady((context: NavDestinationContext) => {
   
      this.pageInfos = context.pathStack
      this.message = context.pathInfo.param as string;
    })
  }
}

大体与PageOne类似,确保在于,会通过NavDestinationContext来接收从首页路由过来传递的参数。

当切换到该界面时,会显示从首页传递的参数“Page Two”。

设置路由

Navigation支持使用系统路由表的方式进行动态路由。各业务模块(HSP/HAR)中需要独立配置route_map.json文件,在触发路由跳转时,应用只需要通过NavPathStack提供的路由方法,传入需要路由的页面配置名称,此时系统会自动完成路由模块的动态加载、页面组件构建,并完成路由跳转,从而实现了开发层面的模块解耦。系统路由表不支持预览器,跨平台及模拟器。其主要步骤如下。

修改src/main/module.json5添加路由表配置:

{
  "module" : {

    //...为节约篇幅,此处省略非核心内容

    "routerMap": "$profile:route_map"
  }
}

添加完路由配置文件地址后,需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息:

{
   
  "routerMap": [
    {
   
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
   
        "description": "this is pageOne"
      }
    },
    {
   
      "name": "pageTwo",
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
      "buildFunction": "PageTwoBuilder",
      "data": {
   
        "description": "this is pageTwo"
      }
    }
  ]
}

上述配置

  • name 跳转页面名称。
  • pageSourceFile 跳转目标页在包内的路径,相对src目录的相对路径。
  • buildFunction 跳转目标页的入口函数名称,必须以@Builder修饰。
  • data 应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。

在跳转目标页面中,需要配置入口Builder函数,函数名称需要和route_map.json配置文件中的buildFunction保持一致,否则在编译时会报错。

运行调测

界面效果如下图所示。

参考引用

目录
相关文章
|
IDE API 开发工具
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件
1309 0
|
4月前
|
定位技术 开发工具
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
148 5
【HarmonyOS】鸿蒙应用实现调用系统地图导航或路径规划
|
API 开发者
HarmonyOS Next快速入门:页面路由
本教程面向HarmonyOS应用开发者,介绍如何使用Router模块实现页面路由功能。通过基本概念、开发指南与实例演示,详细讲解页面跳转、返回、命名路由及数据传递等核心操作。示例涵盖首页→登录→个人中心的完整流程,帮助开发者快速掌握`router.pushUrl`、`router.replaceUrl`、`router.back`和`router.clear`等API的使用方法。点击链接查看视频教程,开启HarmonyOS应用开发之旅!
93 0
|
4月前
|
API 开发者 索引
HarmonyOS API 15 新晋导航点组件Indicator详解
本节介绍HarmonyOS API 15新增的导航点组件Indicator的特性和用法,支持圆点和数字两种导航样式。示例基于DevEco Studio 5.0.5,展示如何不依赖Swiper组件独立显示导航点。通过IndicatorComponentController控制翻页,设置初始索引、样式、循环、总数及方向等属性,并处理索引变化事件。代码示例详细解析各属性与事件的功能,适用于API Version 15及以上版本,支持ArkTS卡片和元服务使用。源码托管于《跟老卫学HarmonyOS开发》GitHub仓库。
72 1
|
4月前
|
UED 开发者
[HarmonyOS NEXT 实战案例十五] 电商分类导航网格布局(进阶篇)
在上一篇教程中,我们学习了如何使用HarmonyOS NEXT的GridRow和GridCol组件实现基础的电商分类导航网格布局。本篇教程将在此基础上,深入探讨如何优化和扩展电商分类导航,实现更加灵活、美观和功能丰富的界面。
89 2
|
4月前
|
搜索推荐 容器
[HarmonyOS NEXT 实战案例十五] 电商分类导航网格布局
本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个电商分类导航的网格布局。电商分类导航是电商应用中常见的功能模块,通过网格布局可以清晰地展示各个商品分类,帮助用户快速找到所需的商品类别。
73 1
|
10月前
|
JSON 前端开发 网络架构
鸿蒙开发:一文探究Navigation路由组件
如果你还在使用router做为页面跳转,建议切换Navigation组件作为应用路由框架,不为别的,因为官方目前针对router已不在推荐。
513 101
鸿蒙开发:一文探究Navigation路由组件
|
5月前
|
Java API Android开发
HarmonyOS实战:路由跳转踩坑记
随着华为HarmonyOS NEXT推出,鸿蒙系统逐渐脱离安卓。为提前做好技术储备,车企也开始学习鸿蒙开发。然而,目前资料稀缺,初学者常遇难题。例如,字符串定义从大写“String”变为小写“string”,路由跳转需手动在`main_pages.json`中注册页面路由,否则会出现“路由不存在”的错误。这些细节易被忽视,建议学习者多留意官方文档与示例代码,分享经验以减少弯路。
146 2
|
8月前
|
前端开发 JavaScript 开发工具
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
458 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
7月前
HarmonyOS NEXT 实战系列06-路由
鸿蒙开发中,页面路由(@ohos.router)和组件导航(Navigation)都支持应用内页面跳转。页面路由更易上手,适合初学者,未来多用于混合场景;而组件导航灵活性更强,支持更丰富的动效与生命周期管理,且更适合一次开发多端部署。 **Router模块**通过URL实现页面切换,提供`router.pushUrl`(压栈跳转,保留当前页状态)和`router.replaceUrl`(替换当前页并销毁)两种模式。同时支持`Standard`(多实例)和`Single`(单实例)实例模式,可传递参数至目标页面。 掌握这些基础,即可进行多页面应用开发。