玩转HarmonyOS NEXT之组件导航与路由跳转一

组件导航 (Navigation)

Navigation是路由容器组件,一般作为首页的根容器,包括单栏(Stack)分栏(Split)自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上,Navigation组件能够自适应显示大小,自动切换分栏展示效果。

Navigation组件主要包含​导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar,包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成,其中导航页可以通过hideNavBar属性进行隐藏,导航页不存在页面栈中,导航页和子页,以及子页之间可以通过路由操作进行切换。

页面显示模式

Navigation组件通过mode属性设置页面的显示模式。

属性名称描述
NavigationMode.Auto自适应模式
NavigationMode.Stack单页面模式
NavigationMode.Split分栏模式

标题栏模式

标题栏在界面顶部,用于呈现界面名称和操作入口,Navigation组件通过titleMode属性设置标题栏模式。

属性名称描述
NavigationTitleMode.MiniMini模式:普通型标题栏,用于一级页面不需要突出标题的场景。
NavigationTitleMode.FullFull模式:强调型标题栏,用于一级页面需要突出标题的场景。
NavigationTitleMode.Split分栏模式

菜单栏

菜单栏位于Navigation组件的右上角,开发者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>CustomBuilder两种参数类型。使用Array<NavigationMenuItem>类型时,竖屏最多支持显示3个图标,横屏最多支持显示5个图标,多余的图标会被放入自动生成的更多图标。

  • NavigationMenuItem

    let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
    Navigation() {
      ...
    }
    .menus([TooTmp,
      TooTmp,
      TooTmp])
    
  • 加粗样式

工具栏

工具栏位于Navigation组件的底部,开发者可以通过toolbarConfiguration属性进行设置。

let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
Navigation() {
  ...
}
.toolbarConfiguration(TooBar)

路由操作

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

页面跳转

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

  • 普通跳转,通过页面的name去跳转,并可以携带param。

    this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
    this.pageStack.pushPathByName("PageOne", "PageOne Param")
    
  • 带返回回调的跳转,跳转时添加onPop回调,能在页面出栈时获取返回信息,并进行处理。

    this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
    console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
    });
    
  • 带错误码的跳转,跳转结束会触发异步回调,返回错误码信息。

    this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
    .catch((error: BusinessError) => {
        console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
    }).then(() => {
    console.error('Push destination succeed.');
    });
    

页面返回

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

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

页面替换

NavPathStack通过Replace相关接口去实现页面替换功能。

// 将栈顶页面替换为PageOne
this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
this.pageStack.replacePathByName("PageOne", "PageOne Param")

页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。

// 删除栈中name为PageOne的所有页面
this.pageStack.removeByName("PageOne")
// 删除指定索引的页面
this.pageStack.removeByIndexes([1,3,5])

参数获取

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

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

路由拦截

NavPathStack提供了setInterception方法,用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象,该对象包含三个回调函数:

属性名称描述
willShow页面跳转前回调,允许操作栈,在当前跳转生效。
didShow页面跳转后回调,在该回调中操作栈会在下一次跳转生效。
modeChangeNavigation单双栏显示状态发生变更时触发该回调。
this.pageStack.setInterception({
  willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
    operation: NavigationOperation, animated: boolean) => {
    if (typeof to === "string") {
      console.log("target page is navigation home page.");
      return;
    }
    // 将跳转到PageTwo的路由重定向到PageOne
    let target: NavDestinationContext = to as NavDestinationContext;
    if (target.pathInfo.name === 'PageTwo') {
      target.pathStack.pop();
      target.pathStack.pushPathByName('PageOne', null);
    }
  }
})

子页面

NavDestinationNavigation子页面的根容器,用于承载子页面的一些特殊属性以及生命周期等。NavDestination可以设置独立的标题栏和菜单栏等属性,使用方法与Navigation相同。NavDestination也可以通过mode属性设置不同的显示类型,用于满足不同页面的诉求。

页面显示类型

  • 标准类型

    NavDestination组件默认为标准类型,此时mode属性为NavDestinationMode.STANDARD。标准类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变化而改变。

  • 弹窗类型

    NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型,此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期,两者可以同时显示。

页面生命周期

Navigation作为路由容器,其生命周期承载在NavDestination组件上,以组件事件的形式开放。

其生命周期大致可分为三类,自定义组件生命周期、通用组件生命周期和自有生命周期(其中aboutToAppearaboutToDisappear是自定义组件的生命周期。如果NavDestination外层包含自定义组件时则存在;OnAppearOnDisappear是组件的通用生命周期,剩下的六个生命周期为NavDestination独有)。

在这里插入图片描述

生命周期描述
aboutToAppear在创建自定义组件后,执行其build()函数之前执行(NavDestination创建之前),允许在该方法中改变状态变量,更改将在后续执行build()函数中生效。
onWillAppearNavDestination创建后,挂载到组件树之前执行,在该方法中更改状态变量会在当前帧显示生效。
onAppear通用生命周期事件,NavDestination组件挂载到组件树时执行。
onWillShowNavDestination组件布局显示之前执行,此时页面不可见(应用切换到前台不会触发)。
onShownNavDestination组件布局显示之后执行,此时页面已完成布局。
onWillHideNavDestination组件触发隐藏之前执行(应用切换到后台不会触发)。
onHiddenNavDestination组件触发隐藏后执行(非栈顶页面push进栈,栈顶页面pop出栈或应用切换到后台)。
onWillDisappearNavDestination组件即将销毁之前执行,如果有转场动画,会在动画前触发(栈顶页面pop出栈)。
onDisappear通用生命周期事件,NavDestination组件从组件树上卸载销毁时执行。
onHiddenNavDestination组件触发隐藏后执行(非栈顶页面push进栈,栈顶页面pop出栈或应用切换到后台)。
aboutToDisappear自定义组件析构销毁之前执行,不允许在该方法中改变状态变量。

页面监听与查询

为了方便组件跟页面解耦,在NavDestination子页面内部的自定义组件可以通过全局方法监听或查询到页面的一些状态信息。

  • 页面信息查询

    自定义组件提供queryNavDestinationInfo方法,可以在NavDestination内部查询到当前所属页面的信息,返回值为NavDestinationInfo,若查询不到则返回undefined

     import observer from '@ohos.arkui.observer';
    
     // NavDestination内的自定义组件
     @Component
     struct MyComponent {
       navDesInfo: observer.NavDestinationInfo | undefined
    
       aboutToAppear(): void {
         this.navDesInfo = this.queryNavDestinationInfo();
       }
    
       build() {
           Column() {
             Text("所属页面Name: " + this.navDesInfo?.name)
           }.width('100%').height('100%')
       }
     }
    
  • 页面状态监听

    通过@ohos.arkui.observer提供的注册接口可以注册NavDestination生命周期变化的监听,使用方式如下:

    	observer.on('navDestinationUpdate', (info) => {
         console.info('NavDestination state update', JSON.stringify(info));
     });
    

    也可以注册页面切换的状态回调,能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo,并且提供了UIAbilityContext和UIContext不同范围的监听:

     // 在UIAbility中使用
     import observer from '@ohos.arkui.observer';
     import { UIContext } from '@ohos.arkui.UIContext';
    
     // callBackFunc 是开发者定义的监听回调函数
     function callBackFunc(info: observer.NavDestinationSwitchInfo) {}
     observer.on('navDestinationSwitch', this.context, callBackFunc);
    
     // 可以通过窗口的getUIContext()方法获取对应的UIContent
     uiContext: UIContext | null = null;
     observer.on('navDestinationSwitch', this.uiContext, callBackFunc);
    

页面专场

关闭专场

  • 全局关闭

    Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开所有转场动画。

    pageStack: NavPathStack = new NavPathStack()
    
    aboutToAppear(): void {
      this.pageStack.disableAnimation(true)
    }
    
  • 单次关闭

    NavPathStack中提供的PushPopReplace等接口中可以设置animated参数,默认为true表示有转场动画,需要单次关闭转场动画可以置为false,不影响下次转场动画。

    pageStack: NavPathStack = new NavPathStack()
    
    this.pageStack.pushPath({ name: "PageOne" }, false)
    this.pageStack.pop(false)
    

自定义专场

Navigation通过customNavContentTransition事件提供自定义转场动画的能力,通过如下三步可以定义一个自定义的转场动画。

  1. 构建一个自定义转场动画工具类CustomNavigationUtils,通过一个Map管理各个页面自定义动画对象CustomTransition,页面在创建的时候将自己的自定义转场动画对象注册进去,销毁的时候解注册。
  2. 实现一个转场协议对象NavigationAnimatedTransition,其中timeout属性表示转场结束的超时时间,默认为1000ms,tansition属性为自定义的转场动画方法,开发者要在这里实现自己的转场动画逻辑,系统会在转场开始时调用该方法,onTransitionEnd为转场结束时的回调。
  3. 调用customNavContentTransition方法,返回实现的转场协议对象,如果返回undefined,则使用系统默认转场。

共享元素专场

NavDestination之间切换时可以通过geometryTransition实现共享元素转场。配置了共享元素转场的页面同时需要关闭系统默认的转场动画。

  1. 为需要实现共享元素转场的组件添加geometryTransition属性,id参数必须在两个NavDestination之间保持一致。
  2. 将页面路由的操作,放到animateTo动画闭包中,配置对应的动画参数以及关闭系统默认的转场。

跨包动态路由

通过静态import页面再进行路由跳转的方式会造成不同模块之间的依赖耦合,以及首页加载时间长等问题。

动态路由设计的目的就是为了解决多个模块(HAR/HSP)之间可以复用相同的业务,各个业务模块之间解耦和路由功能扩展整合。

动态路由的优势:

  • 路由定义除了跳转的URL以外,可以丰富的配置扩展信息,如横竖屏默认模式,是否需要鉴权等等,做路由跳转时统一处理。
  • 给每个路由页面设置一个名字,按照名称进行跳转而不是文件路径。
  • 页面的加载可以使用动态Import(按需加载),防止首个页面加载大量代码导致卡顿。

动态路由提供系统路由表和自定义路由表两种方式:

  • 系统路由表相对自定义路由表,使用更简单,只需要添加对应页面跳转配置项,即可实现页面跳转。
  • 自定义路由表使用起来更复杂,但是可以根据应用业务进行定制处理。

系统路由表

从API version 12开始,Navigation支持使用系统路由表的方式进行动态路由。各业务模块(HSP/HAR)中需要独立配置router_map.json文件,在触发路由跳转时,应用只需要通过NavPactStack提供的路由方法,传入需要路由的页面配置名称,此时系统会自动完成路由模块的动态加载、页面组件构建,并完成路由跳转,从而实现了开发层面的模块解耦。

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

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

      {
        "routerMap": [
          {
            "name": "PageOne",
            "pageSourceFile": "src/main/ets/pages/PageOne.ets",
            "buildFunction": "PageOneBuilder",
            "data": {
              "description" : "this is PageOne"
            }
          }
        ]
      }
    
    属性名称属性说明
    name跳转页面名称。
    pageSourceFile跳转目标页在包内的路径,相对src目录的相对路径。
    buildFunction跳转目标页的入口函数名称,必须以@Builder修饰。
    data应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。
  3. 在跳转目标页面中,需要配置入口Builder函数,函数名称需要和router_map.json配置文件中的buildFunction保持一致,否则在编译时会报错。

      // 跳转页面入口函数
      @Builder
      export function PageOneBuilder() {
        PageOne()
      }
    
      @Component
      struct PageOne {
        pathStack: NavPathStack = new NavPathStack()
    
        build() {
          NavDestination() {
          }
          .title('PageOne')
          .onReady((context: NavDestinationContext) => {
             this.pathStack = context.pathStack
          })
        }
      }
    
  4. 通过pushPathByName等路由接口进行页面跳转。(注意:此时Navigation中可以不用配置navDestination属性)

      @Entry
      @Component
      struct Index {
        pageStack : NavPathStack = new NavPathStack();
    
        build() {
          Navigation(this.pageStack){
          }.onAppear(() => {
            this.pageStack.pushPathByName("PageOne", null, false);
          })
          .hideNavBar(true)
        }
      }
    

自定义路由表

开发者可以通过自定义路由表的方式来实现跨包动态路由。

  1. 定义页面跳转配置项。

    • 使用资源文件进行定义,通过资源管理@ohos.resourceManager在运行时对资源文件解析。

    • 在ets文件中配置路由加载配置项,一般包括路由页面名称(即pushPath等接口中页面的别名),文件所在模块名称(hsp/har的模块名),加载页面在模块内的路径(相对src目录的路径)。

  2. 加载目标跳转页面,通过import将跳转目标页面所在的模块在运行时加载, 在模块加载完成后,调用模块中的方法,通过import在模块的方法中加载模块中显示的目标页面,并返回页面加载完成后定义的Builder函数。

  3. 触发页面跳转,在Navigation的.navDestination属性执行步骤2中加载的Builder函数,即可跳转到目标页面。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【多线程】线程同步--条件变量的原理及其使用

文章目录 前言线程同步的基本概念条件变量定义条件变量初始化条件变量销毁条件变量等待条件&#xff08;重要&#xff09;唤醒等待简单运用常见使用条件变量的格式 前言 线程同步意味着在多线程并发执行中&#xff0c;协调线程之间的执行顺序&#xff0c;以确保共享资源被正确…

本地部署,图片细节处理大模型Tile Controlnet

目录 什么是 Tile ControlNet&#xff1f; 工作原理 应用场景 优势与挑战 优势 挑战 本地部署 运行结果 未来展望 结论 Tip&#xff1a; 在近年来的深度学习和计算机视觉领域&#xff0c;生成对抗网络&#xff08;GAN&#xff09;和扩散模型等技术取得了显著的进展。…

Everything搜索无法搜索到桌面的文件(无法检索C盘 或 特定路径的文件)

现象描述 在Everything搜索框中输入桌面已存在的文件或随便已知位置的文件&#xff0c;无法找到。 搜索时检索结果中明显缺少部分磁盘位置的&#xff0c;例如无法检索C盘&#xff0c;任意关键字搜索时结果中没有位于C盘的&#xff0c;无论怎样都搜不到C盘文件。 解决方法 在…

新书速览|HTML5+CSS3 Web前端开发与实例教程:微课视频版

《HTML5CSS3 Web前端开发与实例教程&#xff1a;微课视频版》 本书内容 《HTML5CSS3 Web前端开发与实例教程&#xff1a;微课视频版》秉承“思政引领&#xff0c;立德树人”的教育理念&#xff0c;自然融入多维度、深层次的思政元素&#xff0c;全面对标企业和行业需求&#x…

IAR 编译优化等级详解

目录 1.编译时优化器何时介入 2.编译优化等级汇总 3.优化项解读 3.1 代码移动 3.2 函数内联 3.3 循环交换 3.4 循环展开 3.5 公用表达式消除 3.6 链接阶段的优化 4 小结 大家好&#xff0c;这里是快乐的肌肉。 最近在迁移工程到IAR编译器上&#xff0c;发现编译优化…

【第27章】MyBatis-Plus之Mybatis X 插件

文章目录 前言一、安装指南二、核心功能1.XML 映射跳转2.代码生成3. 重置模板 三、JPA 风格提示四、常见问题解答1. JPA 提示功能无法使用&#xff1f;2. 生成的表名与预期不符&#xff1f; 五、代码生成模板配置1. 默认模板2. 重置默认模板3. 自定义模板内容3.1 实体类信息3.2…

虚拟机因断电进入./#状态解决办法

现象&#xff1a; 解决&#xff1a;先查看错误日志&#xff1a;journalctl -p err -b查看自己虚拟机中标黄部分的名字 之后运行&#xff1a;xfs_repair -v -L /dev/sda #这里sda用你自己标黄的 最后重启 reboot 即可。

基于Java技术的网吧管理系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术&#xff0c;B/S结构 工具&#xff1a;MyEclipse&#xff0c;MySQL 系统展示 首页 个人中…

WebRTC API接口教程:实现高效会议的步骤?

WebRTC api接口教程如何使用&#xff1f;WebRTC api接口的功能&#xff1f; WebRTC无需中间服务器即可传输音视频流&#xff0c;为视频会议、在线教育等应用提供了强大的支持。AokSend将详细介绍如何利用WebRTC API接口实现高效会议的步骤。 WebRTC API接口教程&#xff1a;获…

悠律凝声环开放式耳机体验:强劲低音、高颜值设计

最近发现了一款潮酷的开放式耳机&#xff0c;不仅颜值抗打&#xff0c;更重要的是能在嘈杂的环境中提供给我一份宁静的沉浸式音乐体验&#xff0c;号称是开放音频中的重低音之王&#xff0c;它就是悠律凝声环开放式耳机。 这款耳机无论其外观设计、音质效果、性价比以及续航能力…

MinIO - 服务端签名直传(前端 + 后端 + 效果演示)

目录 开始 服务端签名直传概述 代码实现 后端实现 前端实现 效果演示 开始 服务端签名直传概述 传统的&#xff0c;我们有两种方式将图片上传到 OSS&#xff1a; a&#xff09;前端请求 -> 后端服务器 -> OSS 好处&#xff1a;在服务端上传&#xff0c;更加安全…

【智能算法改进】一种混合多策略改进的麻雀搜索算法

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】麻雀搜索算法&#xff08;SSA&#xff09;原理及实现 2.改进点 精英反向学习策略 将精英反向学习策略应用到初始化阶段, 通过反向解的生成与精英个体的选择, 不仅使算法搜索范围得到扩大, 提…

DELTA: DEGRADATION-FREE FULLY TEST-TIME ADAPTATION--论文笔记

论文笔记 资料 1.代码地址 2.论文地址 https://arxiv.org/abs/2301.13018 3.数据集地址 https://github.com/bwbwzhao/DELTA 论文摘要的翻译 完全测试时间自适应旨在使预训练模型在实时推理过程中适应测试数据流&#xff0c;当测试数据分布与训练数据分布不同时&#x…

苹果笔记本电脑能玩哪些游戏 苹果电脑可以玩的单机游戏推荐

苹果笔记本有着优美的外观和强大的性能。用户不仅可以使用苹果笔记本办公、剪辑&#xff0c;越来越多的用户开始关注苹果笔记本在游戏领域的表现&#xff0c;尤其是在大型游戏方面。本文将为你详细介绍苹果笔记本都能玩什么游戏&#xff0c;以及为你推荐苹果电脑可以玩的单机游…

tesla p100显卡显示资源不足,api调用失败

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

进程间的通信--管道

文章目录 一、进程通信的介绍1.1进程间为什么需要通信1.2进程如何通信 二、管道2.1匿名管道2.1.1文件描述符理解管道2.1.2接口使用2.1.3管道的4种情况2.1.4管道的五种特征 2.2管道的使用场景2.2.1命令行中的管道2.2.2进程池 2.命名管道2.1.1原理2.2.2接口2.2.3代码实例 一、进程…

C++初阶:类与对象(一)

✨✨所属专栏&#xff1a;C✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 类的定义 定义格式 • class为定义类的关键字&#xff0c;后面跟类的名字&#xff0c;{}中为类的主体&#xff0c;注意类定义结束时后⾯分号不能省略。类体中内容称为类的成员&#xff1b;类中的变量称为类的…

设计模式之职责链模式

1. 职责链模式&#xff08;Chain of Responsibility Pattern&#xff09; 在职责链模式中&#xff0c;多个处理器依次处理同一个请求。一个请求先经过 A 处理器处理&#xff0c;然后再把请求传递给 B 处理器&#xff0c;B处理器处理完后再传递给 C 处理器&#xff0c;以此类推&…

【Android组件】封装加载弹框

&#x1f4d6;封装加载弹框 ✅1. 构造LoadingDialog✅2. 调用LoadingDialog 效果&#xff1a; ✅1. 构造LoadingDialog 构造LoadingDialog类涉及到设计模式中的建造者模式&#xff0c;进行链式调用&#xff0c;注重的是构建的过程&#xff0c;设置需要的属性。 步骤一&#x…

基于考研题库小程序V2.0实现倒计时功能板块和超时判错功能

V2.0 需求沟通 需求分析 计时模块 3.1.1、功能描述←计时模块用于做题过程中对每一题的作答进行30秒倒计时&#xff0c;超时直接判错&#xff0c;同时将总用时显示在界面上;记录每次做题的总用时。 3.1.2、接口描述←与判定模块的接口为超时判定&#xff0c;若单题用时超过 …