`
龙儿筝
  • 浏览: 9613 次
社区版块
存档分类
最新评论

鸿蒙Navigation知识点详解

阅读更多

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)能够复用相同的业务逻辑,实现各业务模块间的解耦,同时支持路由功能的扩展与整合。

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

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

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

0
0
分享到:
评论

相关推荐

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合问题

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合问题

    基于鸿蒙Navigation系统路由表和Hvigor插件的动态路由方案(源码+说明文档).zip

    一款轻量级的动态路由框架,基于鸿蒙Navigation系统路由表和Hvigor插件实现的方案,可以解决多个业务模块(HAR/HSP)之间解耦和通信问题,从而实现业务复用和功能扩展。 Main Function Points 对Navigation简化使用...

    Android NavigationDrawer 开发详解

    在Android应用开发中,`NavigationDrawer`是一种常见的设计模式,用于提供一个可以从屏幕侧边滑出的菜单,通常用于在不同功能之间切换。这个组件在Android Material Design规范中被广泛推荐,可以为用户提供一致的...

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合与通信问题

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合与通信问题

    Struts2知识点详解

    这个"Struts2知识点详解"涵盖了从基础到高级的所有核心概念,旨在帮助开发者深入理解并熟练运用Struts2。 1. **Struts2框架结构**:Struts2的核心是Action类,它是处理用户请求的中心。通过Action类,开发者可以...

    HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试

    在“HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试”中,我们可以学习到关于HarmonyOS应用开发的关键知识点。这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。...

    Android开发:Android Jetpack:6.Navigation组件使用详解.pdf

    Android开发:Android Jetpack:6.Navigation组件使用详解.pdf

    HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能

    在 HarmonyOS 应用开发中,底部导航栏...理解并掌握这些知识点,对于开发出用户体验良好的 HarmonyOS 应用至关重要。通过不断实践和学习,你将能够熟练运用 HarmonyOS 开发框架,打造出更加出色的分布式应用程序。

    Kotlin Navigation可视化开发详解.pdf

    ### Kotlin Navigation 可视化开发详解 #### 一、引言与概述 随着移动应用的日益复杂,良好的页面导航设计成为提升用户体验的关键因素之一。Kotlin Navigation作为JetPack中的一个重要组件,提供了强大的可视化...

    Harmonyos博客文章.zip

    HarmonyOS,全称为鸿蒙操作系统,是华为公司自主研发的一款面向未来、全场景的分布式操作系统,旨在为各种智能设备提供统一的操作平台。HarmonyOS的核心设计理念是打破设备间的壁垒,实现跨平台、跨设备的无缝协同...

    React Native react-navigation 导航使用详解

    React Native react-navigation 导航使用详解 React Native 中的 react-navigation 库是当前最流行的导航解决方案之一,该库提供了强大的导航功能,可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-...

    带红点的BottomNavigationView+viewpager demo

    【知识点详解】 1. **BottomNavigationView**: - `BottomNavigationView`是Android支持库提供的一种底部导航组件,它允许用户在多个顶层操作之间轻松切换。在这个示例中,它被用来展示三个不同的功能选项,并且每...

    Android Material Bottom Navigation使用教程

    Material Design的组件库包含了许多元素,如按钮、输入框、导航抽屉等,而Bottom Navigation是其中之一。本教程将详细介绍如何在Android项目中使用Material Design的Bottom Navigation。 Bottom Navigation是一种...

    SSH2 主要知识点+SSH2的jar包详解.docx

    SSH2主要知识点与SSH2的jar包详解涵盖了SSH2整合所需的关键技术和概念,SSH2是Secure Shell的一个版本,主要用于提供安全的远程登录和其他网络服务。SSH2提供了加密和身份验证功能,确保数据传输的安全性。在Java...

    AppNavigation官方例子资源

    在这个`AppNavigation`资源中,你可能会找到以下关键知识点: 1. **Navigation XML文件**:这些文件定义了应用的导航结构。你可以看到如何声明目的地,如何设置动作(Action)以及如何传递参数。例如,`main_...

    ROS与navigation教程.pdf

     ROS 与 navigation 教程-目录  ROS 与 navigation 教程-设置机器人使用 TF  ROS 与 navigation 教程-基本导航调试指南  ROS 与 navigation 教程-安装和配置导航包  ROS 与 navigation 教程-结合 RVIZ 与...

    BottomNavigationView去除菜单项动画效果代码

    在Android开发中,BottomNavigationView(底部导航视图)是一个常用组件,用于在多个视图间进行切换。在设计用户界面时,我们有时需要对它的默认行为进行自定义,比如在这个场景下,我们要去除 BottomNavigationView...

    微信小程序 navigation API实例详解

    微信小程序的navigation API是开发者用来控制小程序内页面导航的关键工具,它允许用户在多个页面间进行切换,并且能自定义导航条的样式和行为。在本文中,我们将深入探讨这些API的功能及其用法。 首先,我们要了解...

    U3D入门知识点思维导图.zip

    《Unity3D入门知识点详解》 Unity3D(简称U3D)是一款强大的跨平台游戏开发引擎,广泛应用于游戏制作、虚拟现实、增强现实等领域。本文将基于提供的思维导图,详细解读Unity3D入门阶段的关键知识点。 1. **2D精灵...

    BottomNavigationView底部导航demo

    【BottomNavigationView底部导航demo】是Android开发中的一个关键知识点,用于在应用的底部提供一种便捷的多页面切换方式。在Android应用设计中,底部导航栏(Bottom Navigation)是一种常见的界面元素,它允许用户...

Global site tag (gtag.js) - Google Analytics