鸿蒙Navigation知识点详解

news/2024/11/14 12:38:06/文章来源:https://www.cnblogs.com/zhaloe/p/18545740

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

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

页面显示模式

Navigation组件通过mode属性设置页面的显示模式。显示模式有三种,默认Auto自适应模式、Stack单页面模式和Split分栏模式。Navigation组件默认为自适应模式,此时mode属性为NavigationMode.Auto。自适应模式下,当页面宽度大于等于一定阈值( API version 9及以前:520vp,API version 10及以后:600vp )时,Navigation组件采用分栏模式,反之采用单栏模式。
单页面模式
分栏模式

标题栏模式

标题栏在界面顶部,用于呈现界面名称和操作入口,Navigation组件通过titleMode属性设置标题栏模式。标题栏有Mini模式,普通型标题栏,用于一级页面不需要突出标题的场景;Full模式,强调型标题栏,用于一级页面需要突出标题的场景。Free模式,当内容为满一屏的可滚动组件时,标题随着内容向上滚动而缩小(子标题的大小不变、淡出)。向下滚动内容到顶时则恢复原样等三种模式。
mini模式
full模式

菜单栏

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

工具栏

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

路由操作

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

  • 页面跳转:使用pushPath或pushPathByName打开一个新页面
  • 页面返回:使用pop、popToName或popToIndex返回上一个页面或返回到指定页面
  • 页面替换:使用replacePath或replacePathByName替换当前页面
  • 页面删除:使用removeByName或removeByIndexes删除指定页面

子页面

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

子页面有两个类型,分为标准类型NavDestinationMode.STANDARD,其生命周期跟随其在NavPathStack页面栈中的位置变化而改变。以及弹窗类型NavDestinationMode.DIALOG,此时整个NavDestination默认透明显示,弹窗类型的NavDestination显示和消失时不会影响下层标准类型的NavDestination的显示和生命周期,两者可以同时显示。

页面监听和查询

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

  • 页面信息查询:自定义组件提供queryNavDestinationInfo方法,可以在NavDestination内部查询到当前所属页面的信息,返回值为NavDestinationInfo,若查询不到则返回undefined。
  • 页面状态监听:通过observer.on('navDestinationUpdate')提供的注册接口可以注册NavDestination生命周期变化的监听,也可以注册页面切换的状态回调,能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo,并且提供了UIAbilityContext和UIContext不同范围的监听。

页面转场

Navigation默认提供了页面切换的转场动画,通过页面栈操作时,会触发不同的转场效果(Dialog类型的页面默认无转场动画),Navigation也提供了关闭系统转场、自定义转场以及共享元素转场的能力。

关闭转场

  • 全局关闭:Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开所有转场动画。
  • 单次关闭:NavPathStack中提供的Push、Pop、Replace等接口中可以设置animated参数,默认为true表示有转场动画,需要单次关闭转场动画可以置为false,不影响下次转场动画。

自定义转场

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

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

共享元素转场

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

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

跨包动态路由

通过静态import页面再进行路由跳转的方式会造成不同模块之间的依赖耦合,以及首页加载时间长等问题。动态路由设计的初衷旨在解决多个模块(HAR/HSP)能够复用相同的业务逻辑,实现各业务模块间的解耦,同时支持路由功能的扩展与整合。

动态路由提供系统路由表和自定义路由表两种实现方式。支持自定义路由表和系统路由表混用。

  • 系统路由表相对自定义路由表,使用更简单,只需要添加对应页面跳转配置项,即可实现页面跳转。

自定义路由表使用起来更复杂,但是可以根据应用业务进行定制处理。

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

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

相关文章

weblogic历史漏洞

weblogic历史漏洞 是什么?weblogic是一个web服务器应用(中间件),和jboss一样都是javaee中间件,只能识别java语言,绝大部分漏洞都是T3反序列化漏洞常见的中间件还有:Apache,nginx,IIS,tomact,weblogic,jboss等 默认端口:7001 Web界面:Error 404 -- Not Found 控制…

Z-Library 入口官方国内最新可用网址(2024持续更新)

Z-Library(简称 Z-Lib,前身为 BookFinder )是全球最大的电子图书馆之一,拥有1046万本书和8484万篇文章。Z-Library从2009年开始提供免费的电子书,至今遭遇了多次封锁,从2024年5月份也停止了国内的任何宣传渠道。所以便出现了很多Z-Library虚假域名(钓鱼网站),本文持续…

OVB

Homura 还在熟睡。 Madoka \(\text{[数据删除]}\)。“Homura 酱,快起床了。” “你看你看,这个是什么。” Madoka 指了指 Homura 的脖子下面。 Homura 醒了。 Madoka 指着的地方有一些黑黑的东西。 “看看这里写的什么,我 是 b a k a。” “啊啊啊啊啊,Madoka,你在干什么啊…

代码随想录算法训练营 | 200.岛屿的数量

岛屿的数量题目链接:https://leetcode.cn/problems/number-of-islands/此题目要点:dfs和bfs都可以解决此题,但是使用dfs代码会更加的简洁首先对grid进行遍历,每一个节点都进行检查,判断是否是1(陆地) 如果是,则进行dfs深搜,并将所有搜到的岛屿节点全置为0,表示此块岛…

5倍提升工作效率,智能合同审查开源系统助力律师行业智能化

一、系统概述 在法律行业,律师和法务人员每天需要处理大量的法律文件和复杂的案件信息。然而,手工分析和关联文档信息既耗时,又容易导致遗漏和错误。为此,我们推出了一款专为法律行业打造的开源免费软件,利用关系抽取算法和深度学习技术,支持自动识别底稿文档中的当事人、…

神经网络架构参考:2-2 卷积篇

densenet 结构层名称 类型 输入大小 (H x W x C) 输出大小 (H x W x C) 核尺寸 步长 参数数量Initial Conv Conv2D 224 x 224 x 3 112 x 112 x 64 7 x 7 2 9,408Max Pooling MaxPool2D 112 x 112 x 64 56 x 56 x 64 3 x 3 2 0Dense Block 1 Composite 56 x 56 x 64 56 x 56 x 2…

数据库字段设置非空, phalcon创建数据验证不通过

在使用phalcon的insert和update功能时,因为数据库所有的字段设置的都是NOT NULL,而phalcon的model在插入或更新之前会自动判断字段是否需要必填,因此导致有空字段时无法存入。 开始遇到这问题时,想到两种解决方法: 一、改数据库字段,把NOT NULL改为可以为空。但该数据库还…

2024年11月中国数据库排行榜:OB连续四月居榜首,腾讯云TDSQL升第九

11月墨天轮排行榜解读新鲜出炉!榜单前五稳中求进,OceanBase连续四月居榜首,第六至十位竞争加剧,此外亦有部分产品焕发活力,一起来看更多排名情况与解读!11月墨天轮社区的中国数据库流行度排行榜已更新,本期共有226个数据库产品参与,相较于年初的292个数据库,产品阵容已…

cmu15545笔记-索引并发控制(Concurrent Indexes)

目录OverviewLock和Latch辨析设计目标大致分类Hash Table LatchesPage LatchesSlot LatchesB+Tree Latches并发问题Latch Crabbing/CoupingOptimistic Coupling(乐观锁)Leaf Node Scan Overview Lock和Latch辨析Lock:抽象的,逻辑的,整体统筹 Latch:具体的,原语性的,自我…

cmu15545笔记:索引并发控制(Concurrent Indexes)

目录OverviewLock和Latch辨析设计目标大致分类Hash Table LatchesPage LatchesSlot LatchesB+Tree Latches并发问题Latch Crabbing/CoupingOptimistic Coupling(乐观锁)Leaf Node Scan Overview Lock和Latch辨析Lock:抽象的,逻辑的,整体统筹 Latch:具体的,原语性的,自我…

cmu15545-索引并发控制(Concurrent Indexes)

目录OverviewLock和Latch辨析设计目标大致分类Hash Table LatchesPage LatchesSlot LatchesB+Tree Latches并发问题Latch Crabbing/CoupingOptimistic Coupling(乐观锁)Leaf Node Scan Overview Lock和Latch辨析Lock:抽象的,逻辑的,整体统筹 Latch:具体的,原语性的,自我…

向量动态量化

本文介绍向量检索服务DashVector动态量化功能和作用。 背景介绍 量化(Quantization)是向量检索技术中一种常用的优化方法,通过一定程度的精度(召回率)损失,来换取性能的大幅度提升,以及内存占用(索引文件大小)大幅度降低。 向量检索服务DashVector支持向量的动态量化,…