HarmonyOS 5.0应用开发——Navigation实现页面路由

news2024/11/28 4:41:29

【高心星出品】

文章目录

      • Navigation实现页面路由
        • 完整的Navigation
          • 入口页面
          • 子页面
        • 页面跳转
        • 路由拦截
        • 其他的

Navigation实现页面路由

Navigation：路由导航的根视图容器，一般作为页面（@Entry）的根容器去使用，包括单页面（stack）、分栏（split）和自适应（auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

在这里插入图片描述

  1. Title：标题栏，通过title属性对标题栏进行设置。通过menus配置菜单
  2. NavContent：内容区域，默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。
  3. ToolBar：工具栏，通过toolbarConfiguration实现对工具栏的配置，如果不配置此属性，ToolBar不显示。竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
  4. NavDestination：作为子页面的根容器，用于显示Navigation的内容区。具备两种类型：STANDARD（标准类型，NavDestination的生命周期跟随NavPathStack栈中标准NavDestination变化而改变），DIALOG（默认透明。不影响其他NavDestination的生命周期）。
  5. NavPathStack：Navigation路由栈，由于管理NavDestination组件的路由跳转。推荐使用NavPathStack配合navDestination属性进行页面路由。
完整的Navigation

要求入口页面必须是Navigation组件作为容器，子页面必须是NavDestinnation组件作为容器。由于我们将页面内容区的页面都添加了页面栈，所以在子页面拿到页面栈之后也可以实现子页面之间跳转。

在这里插入图片描述

入口页面
import { page1 } from '../viewmodel/page1'
import { page2 } from '../viewmodel/page2'

@Entry
@Component
struct Index {
  // 菜单栏
  private menuitems:NavigationMenuItem[]=[
    {
      value:'菜单1',
      icon:'resources/base/media/startIcon.png',
      action:()=>{}
    },
    {
      value:'菜单2',
      icon:'resources/base/media/startIcon.png',
      action:()=>{}
    }
  ]
  // 工具栏
  private toolbaritems:ToolbarItem[]=[
    {
      value:'工具1',
      icon:$r('app.media.startIcon'),
      action:()=>{}
    },
    {
      value:'工具2',
      icon:$r('app.media.startIcon'),
      action:()=>{}
    },
    {
      value:'工具3',
      icon:$r('app.media.startIcon'),
      action:()=>{}
    },
    {
      value:'工具4',
      icon:$r('app.media.startIcon'),
      action:()=>{}
    }
  ]
  // 页面路由栈
  @Provide('pathstack') pathstack:NavPathStack=new NavPathStack()

  // 内容页
  @Builder
  pagemap(pagename:string){
   if(pagename=='page1'){
     page1()
   }else if(pagename=='page2'){
     page2()
   }
  }

  build() {
    Navigation(this.pathstack){
     Column({space:20}){
       Text('page1').fontSize(28).padding(10).border({width:2,color:Color.Red})
         .onClick(()=>{
           this.pathstack.pushPath({name:'page1'})
         })
         .width('100%')
       Text('page2').fontSize(28).padding(10).border({width:2,color:Color.Red})
         .onClick(()=>{
           this.pathstack.pushPath({name:'page2'})
         })
         .width('100%')
     }.width('100%')
      .height('100%')
      .backgroundColor(Color.Gray)
    }
    // 标题栏
    .title('主标题')
    // 菜单栏
    .menus(this.menuitems)
    // 工具栏
    .toolbarConfiguration(this.toolbaritems)
    // 内容页
    .navDestination(this.pagemap)



  }
}
子页面
/**
 *作者：gxx
 *时间：2024/10/24 10:13
 *功能：
 **/
@Component
export struct page1 {
//   子页面拿到页面栈
@Consume('pathstack') pathstack:NavPathStack
  private menuitems: NavigationMenuItem[] = [
    {
      value: '菜单1',
      icon: 'resources/base/media/startIcon.png',
      action: () => {
      }
    },
    {
      value: '菜单2',
      icon: 'resources/base/media/startIcon.png',
      action: () => {
      }
    }
  ]

  build() {
    NavDestination() {
      Column() {
        Text('page1').fontSize(28).fontWeight(FontWeight.Bolder)
      }.width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)

    }.title('页面标题')
    .menus(this.menuitems)

  }
}
页面跳转

普通页面跳转

pushpath和replacepath都可以实现页面跳转，他们的区别就是在页面栈中覆盖页面还是替换页面的区别，replacepath无法实现pop回调，因为当前页在跳转的时候已经被销毁。

// 子页面之间也可以跳转
this.pathstack.replacePath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})
this.pathstack.pushPath({name:'page1',onPop:(info)=>{console.log('gxxt ',JSON.stringify(info))}})

这里面的onpop是可选参数，如果设置了意味着在目标页可以通过调用页面栈的pop方法回到当前页，并且将返回值带过来，相当于带返回值的跳转。

.onBackPressed(()=>{
      this.pathstack.pop(result)
      return true
    })

此处result为目标页返回给当前页的返回值。

跳转携带数据

跳转的时候可以携带数据，通过param可以设置这些数据，并在目标页中获取。

.onClick(()=>{
  this.pathstack.pushPath({name:'page1',param:'来自首页的信息'})
})

这里携带了字符串类型的数据作为param。

.onReady((cxt)=>{
 let param= cxt.pathInfo.param as string
  promptAction.showToast({message:param})
})

可以在子页面的NavDestination的onready中获取携带过来的数据。

路由拦截

路由跳转中可以进行拦截处理，常用于路由重定向。比如主页面跳转到page1的时候，携带的数据为page2，重定向到page2.

.onClick(()=>{
  this.pathstack.pushPath({name:'page1',param:'page2'})
})

在首页跳转到page1页面。

aboutToAppear(): void {
  // 设置拦截器
  this.pathstack.setInterception({
    willShow:(from:NavDestinationContext|NavBar,to:NavDestinationContext|NavBar)=> {
      // 回到主页面的时候to是navbar
      if (typeof to == 'string') {
        return
      } else {
        let cxt = to as NavDestinationContext
        // 如果跳转到page1 但是携带数据是page2 就跳转到page2
        if (cxt.pathInfo.name == 'page1') {
          if (cxt.pathInfo.param == 'page2') {
          //移除page1
            this.pathstack.pop()
            this.pathstack.pushPath({ name: 'page2',param:'pagex' })
          }
        }
      }
    }
  })
}

在主页定义了页面栈的拦截器，只要跳转的目标是page1并且携带了数据page2，就将page1移除，重定向到page2，就相当于从主页直接跳转到了page2.

其他的

在主页中可以设置标题为mini并关闭后退按钮，从而保持界面统一化。

.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)

在子页中可以在生命周期方法onReady中拿到当前子页的上下文环境context，里面包含了页面路由的相关信息。

.onReady((cxt)=>{
 let param= cxt.pathInfo.param as string
  promptAction.showToast({message:param})
})

在子页中点击后退图标或者按后退键都是执行了NavDestination的onBackpress生命周期函数，我们可以重写该函数。

.onBackPressed(()=>{
  this.pathstack.pop('gxx')
  return true
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2227688.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flink CDC系列之：学习理解核心概念——Data Pipeline

Flink CDC系列之：学习理解核心概念——Data Pipeline

Flink CDC系列之：学习理解核心概念——Data Pipeline 数据管道sourcesink管道配置Table IDroutetransform案例 数据管道 由于 Flink CDC 中的事件以管道方式从上游流向下游，因此整个 ETL 任务被称为数据管道。 管道对应于 Flink 中的一系列操作。 要描…
阅读更多...
25届电信保研经验贴（清华大学电子工程系，工程硕博）

25届电信保研经验贴（清华大学电子工程系，工程硕博）

个人背景 学校：中九 专业：电子信息工程 加权：92.89 绩点：3.91/4.0 rank：前五学期rank2/95，综合排名rank1（前六学期和综合排名出的晚，实际上只用到了前五学期） 科研…
阅读更多...
安卓取消触摸屏幕的指针效果

安卓取消触摸屏幕的指针效果

在安卓系统中，取消触摸屏幕的指针效果（通常指开发者模式下的屏幕点按反馈显示或指针位置显示）可以通过ADB（Android Debug Bridge）命令来实现。以下是具体的步骤和命令： 使用ADB命令取消触摸屏幕的指针效果 …
阅读更多...
数据库基础介绍

数据库基础介绍

前言： 在当今信息化、数字化的时代，数据库是支撑一切信息系统的核心基础设施。无论是金融机构的账户管理、电商平台的商品库存，还是社交媒体的用户信息，数据库都在背后扮演着关键角色数据库不仅用于存储和管理数据，更…
阅读更多...
使用AMD GPU和LangChain构建问答聊天机器人

使用AMD GPU和LangChain构建问答聊天机器人

Question-answering Chatbot with LangChain on an AMD GPU — ROCm Blogs 作者：Phillip Dang 2024年3月11日 LangChain是一个旨在利用语言模型强大功能来构建前沿应用程序的框架。通过将语言模型连接到各种上下文资源并基于给定的上下文提供推理能力，L…
阅读更多...
一篇文章总结 SQL 基础知识点

一篇文章总结 SQL 基础知识点

1. 官方文档 MySQL：https://dev.mysql.com/doc/refman/8.4/en/ SQL Server：What is SQL Server? - SQL Server | Microsoft Learn Oracle：https://docs.oracle.com/en/database/oracle/oracle-database/23/lnpls/loe.html 2. 术语 SQL S…
阅读更多...
【Java数据结构】树】

【Java数据结构】树】

【Java数据结构】树 一、树型结构1.1 概念1.2 特点1.3 树的类型1.4 树的遍历方式1.5 树的表示形式1.5.1 双亲表示法1.5.2 孩子表示法1.5.3 孩子双亲表示法1.5.4 孩子兄弟表示法 二、树型概念（重点） 此篇博客希望对你有所帮助（帮助你了解树&am…
阅读更多...
【MyBatis源码】SqlSource对象创建流程

【MyBatis源码】SqlSource对象创建流程

文章目录 介绍XMLScriptBuilder初始化parseDynamicTags解析动态节点RawSqlSource分析代码分析实例化 介绍 代码入口： SqlSource sqlSource langDriver.createSqlSource(configuration, context, parameterTypeClass);languageRegistry：用于注册Langua…
阅读更多...
centos下面的jdk17的安装配置

centos下面的jdk17的安装配置

文章目录 1.基本指令回顾2.jdk17的安装到这个centos上面2.1首先切换到这个root下面去2.2查看系统jdk版本2.3首先到官网找到进行下载2.4安装包的上传2.5jdk17的安装包的解压过程2.6配置环境变量2.7是否设置成功，查看版本 1.基本指令回顾 ls:list也就是列出来这个目录…
阅读更多...
基于Multisim的数字温度计设计与仿真

基于Multisim的数字温度计设计与仿真

1.设计测量范围为 0℃到 99℃的数字温度计 2.可实时显示温度 3.精度误差小于 1℃ 4.LED 数码直读显示温度大小 链接：https://pan.baidu.com/s/1isIHpMESTBTf2T2SY9-iPw 提取码：qh4o
阅读更多...
明日周刊-第25期

明日周刊-第25期

十月的最后几天了，将要迎来十一月。冬天快乐 文章目录 科技短讯AI珠宝设计平台Meta AI获准使用路透社新闻OpenAI：今年不会发布“Orion”模型谷歌音乐AI创作工具Meta上线AI播客生成器📱科技大厂Waymo完成5.6亿美元新融资波音考虑出售航天业务苹…
阅读更多...
Android AAR嵌套AAR打包出现问题解决方案

Android AAR嵌套AAR打包出现问题解决方案

一、背景 module 打包一般会打包成 aar 的形式。如果 module 引用了一个本地的 aar，在打包的时候，这个被引用的 aar 是不会打包进去的，这种设计思想是比较好的，可以很好的避免包冲突的问题。例如 App 引用了两个 aar（1…
阅读更多...
构建生产级的 RAG 系统

构建生产级的 RAG 系统

对 RAG 应用程序进行原型设计很容易，但要使其高性能、健壮且可扩展到大型知识语料库却很困难。 本指南包含各种提示和技巧，以提高 RAG 工作流程的性能。我们首先概述一些通用技术 - 它们按照简单到复杂的顺序进行排列。然后，我们将更深入地研…
阅读更多...
【移动应用开发】Android持久化技术

【移动应用开发】Android持久化技术

目录 一、实现一个“我的图书馆” 1. 用户登陆界面 1.1 运行截图 1.2 源代码 ① 布局文件activity_login.xml ② res/values/strings.xml ③ LoginActivity.kt ④ 在AndroidManifest.xml注册LoginActivity.kt 2. 图书信息数据库和显示界面 2.1 功能实现截图 2.2 源…
阅读更多...
二百七十一、Kettle——ClickHouse增量导入数据清洗记录表

二百七十一、Kettle——ClickHouse增量导入数据清洗记录表

一、目的 在完成错误数据表任务后，需要对每条错误数据的错误字段及其字段值进行分析 Hive中原有SQL语句和ClickHouse现有SQL语句很大不同 二、Hive中原有代码 2.1 表结构 --31、静态排队数据清洗记录表 create table if not exists hurys_db.dwd_data_clean_…
阅读更多...
kubernetes——part2-3 使用RKE构建企业生产级Kubernetes集群

kubernetes——part2-3 使用RKE构建企业生产级Kubernetes集群

使用RKE构建企业生产级Kubernetes集群 一、RKE工具介绍 RKE是一款经过CNCF认证的开源Kubernetes发行版，可以在Docker容器内运行。 它通过删除大部分主机依赖项，并为部署、升级和回滚提供一个稳定的路径，从而解决了Kubernetes最常见的安装复杂…
阅读更多...
软件测试学习笔记丨Selenium学习笔记：css定位

软件测试学习笔记丨Selenium学习笔记：css定位

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/22511 本文为霍格沃兹测试开发学社的学习经历分享，写出来分享给大家，希望有志同道合的小伙伴可以一起交流技术，一起进步~ 说明：本篇博客基于sel…
阅读更多...
【瑞吉外卖】-day01

【瑞吉外卖】-day01

目录 前言 第一天项目启动 获取资料 创建项目 ​编辑 连接本地数据库 连接数据库 修改用户名和密码 ​编辑创建表 创建启动类来进行测试 导入前端页面 创建项目所需目录 检查登录功能 登录界面 登录成功 登录失败 代码 退出功能 易错点 前言 尝试一下企业级项…
阅读更多...
【论文阅读】ESRGAN

【论文阅读】ESRGAN

学习资料 论文题目：增强型超分辨率生成对抗网络（ESRGAN: Enhanced Super-Resolution Generative Adversarial Networks）论文地址：[1809.00219] ESRGAN：增强型超分辨率生成对抗网络代码：xinntao / ESRGAN&am…
阅读更多...
【HarmonyOS】判断应用是否已安装

【HarmonyOS】判断应用是否已安装

【HarmonyOS】判断应用是否已安装 前言 在鸿蒙中判断应用是否已安全，只是通过包名是无法判断应用安装与否。在鸿蒙里新增了一种判断应用安装的工具方法，即：canOpenLink。 使用该工具函数的前提是，本应用配置了查询标签querySch…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023