首页 > 其他分享 >HarmonyOS NEXT应用开发—Navigation开发 页面切换场景范例

HarmonyOS NEXT应用开发—Navigation开发 页面切换场景范例

时间:2024-04-09 22:22:06浏览次数:34  
标签:name NavDestination NEXT HarmonyOS 跳转 Navigation 路由 页面

简介

在应用开发时,我们常常遇到,需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理,它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载,navPathStack路由跳转。

本文就以Navigation页面切换范例为例,来展开讲解Navigation以上的技术点,帮助开发者快速学习。

场景概述

ArkUI中,应用内导航组件Navigation一般作为Page页面的根容器, Navigation组件主要包含主页和内容页。
主页内容区默认首页显示导航内容(Navigation的子组件) 或非首页显示(NavDestination的子组件),首页和非首页通过路由进行切换。
Navigation的路由切换的方式有两种,本次示例主要介绍NavPathStack的使用。

  • 在API Version 9上,首页导航内容需要配合NavRouter组件实现页面路由。
  • 从API Version 10开始,首页推荐使用NavPathStack配合NavDestination属性进行页面路由。

通过本篇文章的学习,你将学会:
1.如何使用NavPathStack路由转场
2.如何在Navigation中跨包引用hsp
3.如何在Navigation中使用动态加载

Router与Navigation适用场景对比

组件 适用场景 特点 转场动画效果对比
Router 模块间与模块内页面切换 通过每个页面的url实现模块间解耦 页面平推转场效果
Navigation 模块内页面切换 通过组件级路由统一路由管理 向右折叠转场效果

使用NavPathStack路由转场

  • NavPathStack有两种路由切换方法,一种是pushPath,如主页---->设置页面,通过使用this.pageStack.pushPath({ name: url })进行跳转,另外一种是pushPathByName,如主页---->详情页面,通过使用this.pageStack.pushPathByName(name, item)进行跳转,其中item为需要传递的参数。

    • NavPathStack支持pop、move、clear方法的使用;pop方法的作用是弹出路由栈栈顶元素,如首页进入商品详情页面,在详情页面使用this.pageStack.pop()方法返回到首页,clear方法的作用是清除栈中所有页面, 如首页跳转到详情页面,详情页面再进入直播页面,在直播页面通过使用this.pageStack.clear()直接返回到首页。除此之外,还有popTo(回退路由栈到第一个名为name的NavDestination页面)、 popToIndex(回退路由栈到index指定的NavDestination页面)、moveToTop(将第一个名为name的NavDestination页面移到栈顶)、moveIndexToTop(将index指定的NavDestination页面移到栈顶)方法, 由于本示例暂时没有合适的按钮去承载这些功能,所以本示例未体现。

    • 路由栈信息,如下所示

获取栈中所有NavDestination页面的名称:this.pageInfos.getAllPathName()
获取index指定的NavDestination页面的参数信息:this.pageInfos.getParamByIndex(1)
获取全部名为name的NavDestination页面的参数信息:this.pageInfos.getParamByName('pageTwo')
获取全部名为name的NavDestination页面的位置索引:this.pageInfos.getIndexByName('pageOne')
获取栈大小:this.pageInfos.size()

实现思路

通过this.pageStack.pushPath({ name: url param: item })进行页面之间的跳转,navpathstack详情。

开发步骤

通过onclick事件调用NavPathStack.pushPath方法跳转页面。源码参考MainPage.ets

Column()
  .onClick(() => {
    this.pageStack.pushPath({ name: listData.moduleName, param: listData.param });
  })

标签:name,NavDestination,NEXT,HarmonyOS,跳转,Navigation,路由,页面
From: https://www.cnblogs.com/maniu/p/18125000

相关文章

  • 鸿蒙HarmonyOS实战-ArkUI组件(Video)
    ......
  • Vue.nextTick() 使用场景及实现原理
    Vue.nextTick()基本使用作用:等待下一次DOM更新刷新的工具方法。为什么需要用到Vue.nextTick()?当你在Vue中更改响应式状态时,最终的DOM更新并不是同步生效的,而是由Vue将它们缓存在一个队列中,直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少......
  • 如何在HarmonyOS(鸿蒙操作系统)上进行应用开发
    文章中提到的关键点包括:学习ArkTS:作者建议初学者首先学习使用ArkTS编写HelloWorld程序,并可以通过TypeScript教程来快速掌握基础语法。对于有Flutter或ReactNative开发经验的开发者来说,页面布局会比较容易上手。页面布局:作者建议根据HarmonyOS的指导文档尝试编写简单布局,......
  • sql server 分页语句OFFSET 和 FETCH NEXT 怎样使用?
    原文链接:https://blog.csdn.net/weixin_45659376/article/details/107336143在SqlServer2012之前,实现分页主要是使用ROW_NUMBER(),在SQLServer2012,可以使用Offset...RowsFetchNext...Rowsonly的方式去实现分页数据查询。在OrderBy子句中新增Offset-Fetch子句,用于从有......
  • 鸿蒙HarmonyOS实战-ArkUI组件(TextInput/TextArea)
    ......
  • nextjs 的函数,参数,属性装饰器的使用
    //属性装饰器constdoc1:PropertyDecorator=(target:any,val:string|symbol)=>{console.log(target);console.log(val);val="覆盖";}//方法装饰器constdoc2:MethodDecorator=(target:any,val:string|symbol,desc:any)=>{cons......
  • 鸿蒙HarmonyOS实战-ArkUI组件(Text/Span)
    ......
  • 【FAQ】HarmonyOS SDK 闭源开放能力 —Asset Store Kitx
    1.问题描述使用关键资产API需要配置SystemCapability.Security.Asset,但不知道syscap.json文件应该配置在哪里,文档也没找到。解决方案新增关键资产等API可以直接参考开发指南里的示例代码进行调用:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/asset-js-add-......
  • AGC008E Next or Nextnext 解题报告
    \(\text{分析}\)\(i\toa_i\)构成内向基环树,配合暴力程序观察内向基环树常见的一些特殊情况:灰色笔对应的是\(i\toa_i\),黑色笔对应的是\(i\top_i\),我们相当于要构造一个黑色的排列(若干环)使得每一条灰色边的起点可以通过一条或两条黑色边到达终点。\(a_i=i\)(全是自环):可以任......
  • TS全栈开发(React+Next.js+Nest.js+UniApp/Vue)项目
    IT环境  我们不可否认从事于互联网相关从业者从产品、开发、测试、运维、销售都吃信息化数字化的红利,对比其他行业薪资高。但从2020年大厂开始裁员、培训机构每年输送大量开发人员、整个国家政府企业工厂信息化建设完成差不多,你们会发现996加班,35岁被降薪裁员,相关IT从业人......