【鸿蒙ArkUI路由/导航系列】一:ArkUI路由原理简介,认识Navigation组件

【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation 关于基本概念就不再多做介绍了,有需要的直接点击上面的链接进行了解即可,我们直接进入正题。HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航。OK,本期内容就到这里啦,下期再会! 阅读详情

Navigation作为导航容器,主要用于实现页面间的路由跳转,Navigation导航既可以作为应用全局的导航容器,也可以作为局部的导航容器,如:在弹窗、模态等非全屏组件中使用。

1、Navigation(导航容器)

Navigation是路由导航的根视图容器,一般作为页面(@Entry修饰的自定义组件,定义为Router页面)的根容器(作为全局导航使用),包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式,Auto模式会基于Navigation组件的宽度自动在Stack(<600vp)和Split(>=600vp)中切换。

Navigation组件本身可不作为显示容器,只用于承载路由的相关功能,如绑定导航控制器对象,路由切换,分栏显示,自定义转场动画控制等。

Navigation组件主要包含​导航栏(NavBar)和子页(NavDestination),子页通过栈结构管理(存在NavPathStack中)。导航栏又称Navbar(Navigation的子组件,直接挂载到Navigation上),可以通过hideNavBar属性进行隐藏(单栏应用推荐隐藏导航页),导航栏不存在页面栈中。子页面是一个以NavDestination为根节点的子树,通过@Builder构造出来,再通过NavPathStack提供的栈操作方法挂载到Navigation上显示,后续详细介绍。

2、NavPathStack(导航控制器)

Navigation的子页面栈存在NavPathStack中,每个Navigation都需要绑定一个NavPathStack对象,NavPathStack用于控制Navigation中所有子页的切换,NavPathStack提供了很多基础的路由切换方法,如:pushPath,pushDestination(带返回回调),pop,replacePath等,以及路由拦截,转场动画控制,路由栈信息获取等能力。NavPathStack也支持开发者继承并复写相关路由操作方法。 NavPathStack跟Navigation一一对应,在每个子页中可以通过NavDestination的onReady回调获取,也可以全局维护一个单例的NavPathStack,在任意地方获取并执行路由操作(注意:页面切换动画和布局必须在UI线程中才可以生效,依赖Vsync信号)

3、NavBar(导航栏)

我们把Navigation中直接加载的孩子节点称为导航栏(NavBar),单栏显示时它是整个导航的首页,分栏显示时它是固定的导航栏(默认显示在左边,也可以通过NavBarPosition属性控制),开发者可以通过hideNavBar去控制导航栏的显隐(推荐仅单栏显示的应用隐藏掉NavBar),也可以通过navBarWidth属性控制双栏显示下的Navbar宽度,NavBar本身不属于页面栈中的页面,不具备页面的生命周期等,不能通过NavPathStack的方法控制。 开发者可以通过onNavBarStateChange去感知导航栏的显隐,通过mode属性控制单双栏切换,也可以通过onNavigationModeChange去感知单双栏的切换。

4、NavDestination(子页容器)

Navigation子页面的根容器,每个子页面都需要包裹在一个NavDestination中,通过NavPathStack提供的栈操作方法(push,pop等)将子页面挂载到Navigation上显示或删除。 NavDestination作为页面根容器,除了支持普通组件的通用属性外,还支持页面相关的属性,如:页面的生命周期,页面工具栏和标题栏,自定义页面转场动画,页面级窗口属性控制(横竖屏,系统状态栏,系统导航条)等能力。

整体导航架构图如下所示: 

 单双栏显示的结构图: 

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件。 阅读详情

相关推荐

鸿蒙5.0开发:ArkUI组件(Navigation)

Navigation组件通常作为页面的根容器,支持单页面、分栏和自适应三种显示模式。

AyomQAQ的博客 993

ArkUI-Navigation

Navigation通过事件提供自定义转场动画的能力。构建一个自定义转场动画工具类,通过map管理各个页面自定义动画对象,页面创建的时候注册自定义转场动画,页面销毁的时候解注册。实现一个转场协议对象NavigationAnimatedTransition,其中timeout属性表示转场结束的超时时间,默认为1000ms,transition属性为自定义的转场动画方法,开发者要在这里实现自己的转场动画逻辑,系统会在转场开始时调用该方法,onTransitionEnd为转场结束时的回调。

gitzzp的博客 2042

【鸿蒙实战开发】基于Navigation的路由管理

Navigation由NavDestination组件组成页面路由,在实现过程中NavDestination组件会被封装在一个自定义组件中,从而作为一个页面被路由栈使用。当前支持的生命周期函数:aboutToAppear、onReady、onAppear、onShow、onHide、onDisappear、aboutToDisappear 、onWillAppear、onWillDisappear。

HarmonyOSMN的博客 7361

【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面之Navigation(二)

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

一个不断前行的程序者 2025

鸿蒙:Navigation的基本使用

注:本章只是简单介绍一下其用法,详情请看官方文档:Navigation:文档中心Navigation组件是路由导航的根视图容器,一般作为Page页面的根容器使用,其内部默认包含了标题栏、内容区和工具栏,其中内容区默认首页显示导航内容(Navigation的子组件)或非首页显示(NavDestination的子组件),首页和非首页通过路由进行切换。NavRouter :导航组件,默认提供点击响应处理,不需要开发者自定义点击事件逻辑。必须包含两个子组件,其中第二个子组件必须为NavDestination。Nav

m0_46924916的博客 4932

PCB印刷电路缺陷检测实战:从数据集准备到模型训练全流程解析

本文详细解析了PCB缺陷检测从数据集准备到模型训练的全流程。重点介绍了PKU-Market-PCB数据集的特点与下载方法,并提供了数据格式转换、模型选择(如YOLOv8)与训练配置的实战代码。针对PCB小目标检测的难点,文章给出了数据分析和模型优化的具体策略,帮助读者构建高效的缺陷检测系统。

weixin_29065791的博客 547

HarmonyOS ArkUI实战开发-页面导航(Navigation)

Navigation的定义不需要传递相关参数,我们先看下NavigationNavigation() { // Navigation只能包含一个子组件.size({width: '100%', height: '100%'}) // Navigation只设置了size,没有设置任何其它属性样例运行结果如下图所示:由运行结果可知,在默认情况下,Navigation的样式是一个带有返回箭头的标题栏加子控件组成的。title:设置导航栏的标题,当参数类型为string。

1 1775

量化策略分享 | MA超进化:LLT低延迟趋势线

移动平均线(MA)是我们技术分析中常用的一种趋势跟踪指标,但在使用的时候你是否也会有这样的烦恼:交易信号延迟太久,或者交易信号太频繁了!延迟性和平滑性问题似乎是不可兼得的“鱼和熊掌”。 针对这个问题,广发证券基于通信领域的滤波器原理,在《短线择时策略研究之三:低延迟趋势线与交易性择时》中创造性构建了:LLT低延迟趋势线(Low-lag Trendline)。 LLT低延迟趋势线是一种二阶滤波器,阶数相对适宜,相比MA、EMA等均线指标能够降低延迟,同时增强在低频部分的输出信号。 当然,..

量化交易研究 5309

【愚公系列】2023年12月 HarmonyOS教学课程 025-ArkUI组件(Navigation)

Navigation组件通常作为页面的根容器,支持单页面、分栏和自适应三种显示模式。开发者可以使用Navigation组件提供的属性来设置页面的标题栏、工具栏、导航栏等。

愚公智库 6万+

STM32 RC522串口驱动程序 (简单直接)

rc522作为使用非常多的读写卡芯片,使用SPI芯片读写应用已经非常广了。但有些时候我们只有串口可以使用,或者我们觉得串口使用更加方便,那么就必须要编写串口的驱动程序。不过很难找到可以直接使用的串口程序。所以在此将我这边写好的串口驱动写好如下: 直接上代码 下面是RC522.C的驱动文件。支持读写卡号8位数据。rc522用的是stm32 的串口3,调试显示是串口1; #include "rc522.h" #include "delay.h" /////////////////////////////////

qq_42074368的博客 9001

Ai数字人直播系统源码部署

虚拟形象定制,直播内容智能生成,多语言支持,智能互动,声音克隆,24 小时不间断直播,多平台直播,智能数据分析,实时情感识别,视频合成,Ai数字人直播系统源码出售,Ai数字人直播系统源码部署实现 AI 数字人 24 小时不间断直播功能是一个较为复杂的任务,涉及到多个方面,如直播流的推送、内容的持续生成、系统的稳定性保障等。以下为你提供一个简化的实现思路和示例代码,借助 Python 结合 FFmpeg 工具来模拟 24 小时不间断直播。

weixin_ggwwsscc的博客 1256

【鸿蒙ArkUI路由/导航系列】〇:ArkUI Navigation组件全面解析:从基础导航到高级路由的实践

【鸿蒙ArkUI路由/导航系列】一:ArkUI路由原理简介,认识Navigation组件详细阐述了Navigation作为导航容器的角色,支持全局及局部导航,并具有单栏(Stack)、分栏(Split)及自适应(Auto)三种显示模式。Navigation组件由导航栏(NavBar)和子页(NavDestination)构成,通过NavPathStack管理子页切换。文章还介绍了Navigation的高级特性,如自定义转场动画、路由拦截及生命周期管理,为开发者提供了全面的Navigation组件使用指南。

Alan_rust的博客 2296

LeRobot — 基于 PyTorch 的真实世界机器人学习框架(一)- 核心框架模块解析

LeRobot 是一个开源的机器人学习框架,由 Hugging Face 开发,旨在降低机器人学的准入门槛。该框架提供完整的机器学习流程支持,包括数据采集、训练、评估和部署。核心模块涵盖数据集标准化、策略算法、硬件抽象和强化学习组件,采用模块化设计实现灵活扩展。通过集成 Hugging Face Hub,用户可以轻松共享数据集和预训练模型。LeRobot 特别注重真实世界的机器人应用,支持多种前沿算法如模仿学习、视觉语言动作模型等,并提供统一的硬件接口和仿真环境适配。

熊猫小妖的AI世界 171

ArkUI---Navigation组件介绍

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

sinat_34896766的博客 1113

相机Camera日志分析之二:高通CamX架构对应Google原生Camera HAL3架构的标准API接口一级日志详细分析注释

【思维决定成长高度】当前讲述的是Camera领域log分析梯度分级讲解,讲究的是一种分析技巧,分析思维,一种感悟。技术路线的提升空间,需要更多开发技巧和开发学习能力去提升。技术大拿分析问题,可以从日志快速定位问题并解决问题,有充分的时间去学习更多知识,成长速度极快。同一起跑线,学习能力,开发效率等等都决定了程序员的成长提升空间。记得我毕业三年,同学之间的差距无限拉大,一些人还在几千块薪水,你已经是他的四五倍了,人与人的差距就是短短几年就拉开了。

429

Qt之自定义QToolTip,去掉显示动画和隐藏延时

先来看看Qt原生QToolTip的缺点:1.当提示内容无变化时,弹窗无法移动。只能先传个空字符串强制弹窗隐藏,然后在新位置再传个字符串。2.默认显示10多秒才消失,当然这个时间是可以设置的,但是如果我想一直显示呢?总不能设置一个超级大的时间吧。3.鼠标移出控件后(调用QToolTip::showText时传入了控件指针)默认300毫秒弹窗才隐藏。而且这个时间没法设置,如果想立即隐藏就没办法了。

草上爬的博客 4268

【鸿蒙ArkUI路由/导航系列】二:Navigation基础路由操作,让页面跳转起来

本文介绍了如何在HarmonyOS中使用Navigation实现页面跳转。首先需要创建NavPathStack绑定到Navigation组件,然后构建子页面并配置路由表。主要路由操作包括:push(创建新页面)、pop(删除栈顶页面)和replace(替换当前页面),支持控制动画效果。开发者可通过NavPathStack的API实现页面切换,并推荐将导航控制器存储在AppStorage中以便全局调用。文章还提供了隐藏导航栏和单实例跳转等进阶使用方法。

Alan_rust的博客 1082

【Java核心高阶进阶】44-Java8核心新特性

模块十:Java新特性演进 · 第 1 篇Java 8 是 Java 语言历史上最重要的一次发布,它引入的函数式编程范式从根本上改变了 Java 的编码方式。即便到了 JDK 21 的今天,Lambda、Stream、Optional 仍是日常开发的高频工具。本篇将深入这些特性的语法、原理与底层机制,帮助你不仅会用,更知其所以然。

gaochufukanyongren的博客 24

ArkUI应用开发——设置导航栏、状态栏的可见模式

weixin_58069108的博客 1287

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

ArkUI--Navigation路由操作

自定义转场步骤:a、构建一个自定义转场动画工具类CustomNavigationUtils,通过一个Map管理各个页面自定义动画对象CustomTransition,页面在创建的时候将自己的自定义转场动画对象注册进去,销毁的时候解注册;

sinat_34896766的博客 2072

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

13.ArkUI Navigation的介绍和使用

Entry@Componentbuild() {Column() {Text('页面内容').title('自定义标题').subTitle('副标题').toolBar({items: [// 分享操作},})

长沙火山 536

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

HarmonyOS笔记5:ArkUI框架的Navigation导航组件

在移动应用中需要在不同的页面进行切换跳转。这种切换和跳转有两种方式:页面路由和Navigation组件实现导航。HarmonyOS推荐使用Navigation实现页面跳转。在本文简单介绍ArkUI框架的Navigation导航组件。

userhu2012的博客 1802

HarmonyOS ArkUI训练营入门-组件掌握系列-Navigation 导航组件详解-PC版本

本文深入解析了HarmonyOS ArkUI中Navigation组件的使用方法。作为移动应用的核心导航元素,Navigation提供了标题栏、内容区和工具栏三部分结构。文章从基础属性入手,详细介绍了标题设置(标准/迷你模式)、工具栏配置(自定义构建器)和返回事件处理等核心功能,并通过实际案例演示了动态修改标题、切换显示模式等交互实现。最后给出了一个完整的导航组件演示案例,包含标题设置、工具栏控制等功能模块,帮助开发者快速掌握这一重要组件的应用技巧。

dingchengyu_的博客 300

鸿蒙 HarmonyOS 6 | ArkUI (07):导航架构 Navigation 组件 (V2) 与路由栈管理最佳实践

在 HarmonyOS 6 的时代,官方明确推荐我们全面拥抱 Navigation 组件。这不仅仅是一个组件的更替,更是一次架构思维的升级。Navigation 不再是一个简单的 API 调用,它是一个容器,一个能够容纳完整路由栈、标题栏和工具栏的超级容器。它将路由的管理权从系统底层交还到了开发者手中,让我们能够像操作数组一样精准地控制页面的进出栈。

Code Metaverse 1448
下一篇: 【鸿蒙ArkUI路由/导航系列】二:Navigation基础路由操作,让页面跳转起来
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值