纯血鸿蒙NEXT-组件导航 (Navigation)

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

路由操作

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行,每个Navigation都需要创建并传入一个NavPathStack对象,用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。

一、配置系统路由

1.1 route_map.json

在工程resources/base/profile中创建route_map.json文件。添加如下配置信息:

{"routerMap": [{"name": "PageOne","pageSourceFile": "src/main/ets/pages/PageOne.ets","buildFunction": "PageOneBuilder"}]
}

配置说明如下:

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

1.2 module.json5添加路由表配

在跳转目标模块的配置文件module.json5添加路由表配置:

{"module": {"name": "entry","type": "entry","description": "$string:module_desc","mainElement": "EntryAbility","deviceTypes": ["phone","tablet","2in1"],"deliveryWithInstall": true,"installationFree": false,"pages": "$profile:main_pages","abilities": [{"name": "EntryAbility","srcEntry": "./ets/entryability/EntryAbility.ets","description": "$string:EntryAbility_desc","icon": "$media:layered_image","label": "$string:EntryAbility_label","startWindowIcon": "$media:startIcon","startWindowBackground": "$color:start_window_background","exported": true,"skills": [{"entities": ["entity.system.home"],"actions": ["action.system.home"]}]}],"extensionAbilities": [{"name": "EntryBackupAbility","srcEntry": "./ets/entrybackupability/EntryBackupAbility.ets","type": "backup","exported": false,"metadata": [{"name": "ohos.extension.backup","resource": "$profile:backup_config"}]}],"routerMap": "$profile:route_map"}
}

在这里插入图片描述

二、路由获取

Navigation作为组件,子页面想要做路由需要拿到Navigation持有的页面栈对象NavPathStack,可以通过如下几种方式获取:

方式一:通过@Provide和@Consume传递给子页面(有耦合,不推荐)。

// Navigation根容器
@Entry
@Component
struct Index {// Navigation创建一个Provide修饰的NavPathStack@Provide('pathStack') pathStack: NavPathStack = new NavPathStack()build() {Navigation(this.pathStack) {// ...}.title("Navigation").mode(NavigationMode.Stack)}
}// Navigation子页面
@Component
export struct PageOne {// NavDestination通过Consume获取到@Consume('pathStack') pathStack: NavPathStack;build() {NavDestination() {// ...}.title("PageOne")}
}

方式二:子页面通过OnReady回调获取

@Component
export struct PageOne {pathStack: NavPathStack = new NavPathStack()build() {NavDestination() {// ...}.title('PageOne').onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack})}
}

方式三: 通过全局的AppStorage接口设置获取

@Entry
@Component
struct Index {pathStack: NavPathStack = new NavPathStack()// 全局设置一个NavPathStackaboutToAppear(): void {AppStorage.setOrCreate("PathStack", this.pathStack)}build() {Navigation(this.pathStack) {// ...}.title("Navigation").mode(NavigationMode.Stack)}
}// Navigation子页面
@Component
export struct PageOne {// 子页面中获取全局的NavPathStackpathStack: NavPathStack = AppStorage.get("PathStack") as NavPathStackbuild() {NavDestination() {// ...}.title("PageOne")}
}

方式四:通过自定义组件查询接口获取,参考queryNavigationInfo

import { uiObserver } from '@kit.ArkUI';// 子页面中的自定义组件
@Component
struct CustomNode {pathStack : NavPathStack = new NavPathStack()aboutToAppear() {// query navigation infolet  navigationInfo : NavigationInfo = this.queryNavigationInfo() as NavigationInfothis.pathStack = navigationInfo.pathStack;}build() {Row() {Button('跳转到PageTwo').onClick(()=>{this.pathStack.pushPath({ name: 'pageTwo' })})}}
}

三、页面跳转

NavPathStack通过Push相关的接口去实现页面跳转的功能,主要分为以下三类:

  1. 普通跳转,通过页面的name去跳转,并可以携带param。
this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.pushPathByName("PageOne", "PageOne Param")
  1. 带返回回调的跳转,跳转时添加onPop回调,能在页面出栈时获取返回信息,并进行处理
this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
});

Index.ets

@Entry
@Component
struct Index {@State message: string = '下一页';pathStack: NavPathStack = new NavPathStack()aboutToAppear(): void {AppStorage.setOrCreate("PathStack", this.pathStack)}build() {Navigation(this.pathStack){RelativeContainer() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(()=>{this.pathStack.pushPathByName("PageOne","PageOne Param",(popInfo)=>{this.message=popInfo.result as string},true)})}.height('100%').width('100%')}}
}

在这里插入图片描述

PageOne.ets

@Builder
export function PageOneBuilder(){PageOne()
}
@Preview
@Component
struct PageOne{@State param?:string=""pathStack: NavPathStack = new NavPathStack()build() {NavDestination(){Column(){Text(this.param).width(200).height(100).onClick(()=>{this.pathStack.pop("Page one return")})}.width('100%').height("100%")}.onReady((context:NavDestinationContext) =>{this.pathStack=context.pathStacklet pathInfo=context.pathInfothis.param=pathInfo.param as string})}
}

在这里插入图片描述

  1. 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息
this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
.catch((error: BusinessError) => {console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
}).then(() => {console.info('Push destination succeed.');
});

四、参数获取

4.1 NavPathStack

通过Get相关接口去获取页面的一些参数

// 获取栈中所有页面name集合
this.pageStack.getAllPathName()
// 获取索引为1的页面参数
this.pageStack.getParamByIndex(1)
// 获取PageOne页面的参数
this.pageStack.getParamByName("PageOne")
// 获取PageOne页面的索引集合
this.pageStack.getIndexByName("PageOne")

route_map.json

{"routerMap": [{"name": "PageOne","pageSourceFile": "src/main/ets/pages/PageOne.ets","buildFunction": "PageOneBuilder"}]
}

Index.ets

@Entry
@Component
struct Index {@State message: string = '下一页';pathStack: NavPathStack = new NavPathStack()aboutToAppear(): void {AppStorage.setOrCreate("PathStack", this.pathStack)}build() {Navigation(this.pathStack){RelativeContainer() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(()=>{this.pathStack.pushPathByName("PageOne","PageOne Param",true)})}.height('100%').width('100%')}}
}

PageOne.ets

@Builder
export function PageOneBuilder(){PageOne()
}
@Preview
@Component
struct PageOne{@State param?:string=""pathStack: NavPathStack = new NavPathStack()build() {NavDestination(){Column(){Text(this.param).width(200).height(100)}.width('100%').height("100%")}.onReady((context:NavDestinationContext) =>{this.pathStack=context.pathStack})}
}

在这里插入图片描述
PageOne.ets

@Builder
export function PageOneBuilder(){PageOne()
}
@Preview
@Component
struct PageOne{@State param?:string=""pathStack: NavPathStack = new NavPathStack()build() {NavDestination(){Column(){Text(this.param).width(200).height(100)}.width('100%').height("100%")}.onReady((context:NavDestinationContext) =>{this.pathStack=context.pathStacklet index=this.pathStack.getIndexByName("PageOne")[0]this.param=this.pathStack.getParamByIndex(index) as string})}
}

getIndexByName
通过路由名获取该页面在栈中的下标,该方法返回的是一个数组
在这里插入图片描述
getParamByIndex
通过索引获取传入的参数,需要强转类型
在这里插入图片描述

4.2 NavPathInfo

在这里插入图片描述

  • nane 系统路由表定义的页面名称
  • param pathStack传递参数字段

PageOne.ets

@Builder
export function PageOneBuilder(){PageOne()
}
@Preview
@Component
struct PageOne{@State param?:string=""pathStack: NavPathStack = new NavPathStack()build() {NavDestination(){Column(){Text(this.param).width(200).height(100)}.width('100%').height("100%")}.onReady((context:NavDestinationContext) =>{let pathInfo=context.pathInfothis.param=pathInfo.param as string})}
}

在这里插入图片描述

五、页面返回

NavPathStack通过Pop相关接口去实现页面返回功能

// 返回到上一页
this.pageStack.pop()
// 返回到上一个PageOne页面
this.pageStack.popToName("PageOne")
// 返回到索引为1的页面
this.pageStack.popToIndex(1)
// 返回到根首页(清除栈中所有页面)
this.pageStack.clear()

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第564题寻找最近的回文数

题目&#xff1a; 题解&#xff1a; #define MAX_STR_LEN 32 typedef unsigned long long ULL;void reverseStr(char * str) {int n strlen(str);for (int l 0, r n-1; l < r; l, r--) {char c str[l];str[l] str[r];str[r] c;} }ULL * getCandidates(const char * n…

docker学习笔记跟常用命令总结

Docker简介 Docker是一个用于构建运行传送应用程序的平台 镜像 将应用所需的函数库、依赖、配置等与应用一起打包得到的就是镜 镜像结构 镜像管理命令 命令说明docker pull拉取镜像docker push推送镜像docker images查看本地镜像docker rmi删除本地镜像docker image prune…

MySQL 中 InnoDB 支持的四种事务隔离级别名称,以及逐级之间的区别?

MySQL中的InnoDB存储引擎支持四种事务隔离级别&#xff0c;这些级别定义了事务在并发环境中的行为和相互之间的可见性。以下是这四种隔离级别的名称以及它们之间的区别&#xff1a; 读未提交&#xff08;Read Uncommitted&#xff09; 特点&#xff1a;这是最低的隔离级别&…

【力扣热题100】[Java版] 刷题笔记-226. 翻转二叉树

题目:226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 解题思路 二叉树翻转&#xff0c;可以通过递归进行交换。 解题过程 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeN…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

【Linux学习】【Ubuntu入门】1-8 ubuntu下压缩与解压缩

1.Linux系统下常用的压缩格式 常用的压缩扩展名&#xff1a;.tar、.tar.bz2、.tar.gz 2.Windows下7ZIP软件安装 Linux系统下很多文件是.bz2&#xff0c;.gz结尾的压缩文件。 3.Linux系统下gzip压缩工具 gzip工具负责压缩和解压缩.gz格式的压缩包。 gzip对单个文件进行…

【Linux】【Shell】Shell 基础与变量

Shell 基础 Shell 基础查看可用的 Shell判断当前 Shell 类型 变量环境变量查看环境变量临时环境变量永久环境变量PATH 变量 自定义变量特殊赋值(双引号、单引号、反撇号) 预定义变量bashrc Shell 基础 Shell 是一个用 C 语言编写的程序&#xff0c;相当于是一个翻译&#xff0c…

自动语音识别(ASR)与文本转语音(TTS)技术的应用与发展

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

React可以做全栈开发吗

React可以做全栈开发吗? 答案是肯定的&#xff0c;而且还比较完美 React可以用于全栈开发&#xff0c;以下是具体的介绍&#xff1a; 前端部分 构建用户界面 React是一个用于构建用户界面的JavaScript库&#xff0c;它通过组件化的方式让开发者能够高效地创建交互式的UI。例…

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析 1. 前言2. 光腔模型3. 光腔衰荡过程4. 衰荡时间与反射率的关系5. 测量步骤①. 光腔调节&#xff1a;②. 光腔衰荡测量&#xff1a;③. 计算衰荡时间常数&#xff1a;④. 反射率计算&#xff1a; 6. 实际应用中的调整7. 技术优…

爬取网易云音乐热歌榜:从入门到实战

爬取网易云音乐热歌榜&#xff1a;从入门到实战 前提声明 爬虫应遵守目标网站的robots.txt协议&#xff0c;尊重版权和用户隐私。本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。本代码所爬音乐为公开可选择的音乐 目录 引言…

C语言菜鸟入门·关键字·void的用法

目录 1. void关键字 1.1 对函数返回的限定 1.2 对函数参数的限定 1.3 用作指针类型 (void*) 2. 更多关键字 1. void关键字 在 C 语言中&#xff0c;void 是一个关键字&#xff0c;用于表示“无类型”或“没有值”。 void的作用&#xff1a; 对函数返回的限定对函数参…

PlncRNA-HDeep:使用基于两种编码风格的混合深度学习进行植物长非编码 RNA 预测

长链非编码 RNA &#xff08;lncRNAs&#xff09; 在调控生物活动中起着重要作用&#xff0c;其预测对探索生物过程具有重要意义。长短期记忆 &#xff08;LSTM&#xff09; 和卷积神经网络 &#xff08;CNN&#xff09; 可以自动从编码的 RNA 序列中提取和学习抽象信息&#x…

HTML5实现剪刀石头布小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…

【软件测试】自动化常用函数

文章目录 元素的定位cssSelectorxpath查找元素 操作测试对象点击/提交对象——click()模拟按键输入——sendKeys(“”)清除文本内容——clear()获取文本信息——getText()获取页面标题和 URL 窗口设置窗口大小切换窗口关闭窗口 等待强制等待隐式等待显式等待 浏览器导航 元素的…

Mybatis-Plus 多租户插件属性自动赋值

文章目录 1、Mybatis-Plus 多租户插件1.1、属性介绍1.2、使用多租户插件mavenymlThreadLocalUtil实现 定义,注入租户处理器插件测试domianservice & ServiceImplmapper 测试mapper.xml 方式 1.3、不使用多租户插件 2、实体对象的属性自动赋值使用1. 定义实体类2. 实现 Meta…

【WPF】Prism学习(六)

Prism Dependency Injection 1.依赖注入&#xff08;Dependency Injection&#xff09; 1.1. Prism与依赖注入的关系&#xff1a; Prism框架一直围绕依赖注入构建&#xff0c;这有助于构建可维护和可测试的应用程序&#xff0c;并减少或消除对静态和循环引用的依赖。 1.2. P…

【H2O2|全栈】MySQL的云端部署

目录 前言 开篇语 准备工作 MySQL移除 为什么需要移除&#xff1f; 移除操作 Yum仓库 yum简介 rpm安装 yum库安装 MySQL安装 使用yum安装 开机自启动 检查运行状态 MySQL配置 初始密码 ​编辑登录 修改root密码 退出MySQL 字符集配置 重启数据库 结束语 …

【Tealscale + Headscale + 自建服务器】异地组网笔记

文章目录 效果为什么要用 Headscale云服务器安装 Headscale配置 config.yaml创建反向代理搭建管理 UI授权管理 UI添加互联设备参考 效果 首先是连接情况&#xff0c;双端都连接上自建的 Headscale&#xff0c; 手机使用移动流量&#xff0c;测试一下 ping 值 再试试进入游戏 可…

【C++】栈、队列、双端队列与优先级队列

目录 一、stack&#xff08;栈&#xff09; 二、queue&#xff08;队列&#xff09; 三、deque&#xff08;双端队列&#xff09; &#xff08;一&#xff09;概念 &#xff08;二&#xff09;为什么能作为 stack 和 queue 的容器 &#xff08;三&#xff09;缺点 四、p…