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

北冰洋以北  金牌会员 | 2024-8-23 16:16:34 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 848|帖子 848|积分 2544

组件导航 (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
    1. let TooTmp: NavigationMenuItem = {'value': "", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
    2. Navigation() {
    3.   ...
    4. }
    5. .menus([TooTmp,
    6.   TooTmp,
    7.   TooTmp])
    复制代码
  • 加粗样式
工具栏

工具栏位于Navigation组件的底部，开发者可以通过toolbarConfiguration属性举行设置。
  1. let TooTmp: ToolbarItem = {'value': "func", 'icon': "./image/ic_public_highlights.svg", 'action': ()=> {}}
  2. let TooBar: ToolbarItem[] = [TooTmp,TooTmp,TooTmp]
  3. Navigation() {
  4.   ...
  5. }
  6. .toolbarConfiguration(TooBar)
复制代码
路由操作

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

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


  • 普通跳转，通过页面的name去跳转，并可以携带param。
    1. this.pageStack.pushPath({ name: "PageOne", param: "PageOne Param" })
    2. this.pageStack.pushPathByName("PageOne", "PageOne Param")
    复制代码
  • 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并举行处置惩罚。
    1. this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
    2. console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
    3. });
    复制代码
  • 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。
    1. this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
    2. .catch((error: BusinessError) => {
    3.     console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
    4. }).then(() => {
    5. console.error('Push destination succeed.');
    6. });
    复制代码
页面返回

NavPathStack通过Pop相关接口去实现页面返回功能。
  1. // 返回到上一页
  2. this.pageStack.pop()
  3. // 返回到上一个PageOne页面
  4. this.pageStack.popToName("PageOne")
  5. // 返回到索引为1的页面
  6. this.pageStack.popToIndex(1)
  7. // 返回到根首页（清除栈中所有页面）
  8. this.pageStack.clear()
复制代码
页面更换

NavPathStack通过Replace相关接口去实现页面更换功能。
  1. // 将栈顶页面替换为PageOne
  2. this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
  3. this.pageStack.replacePathByName("PageOne", "PageOne Param")
复制代码
页面删除

NavPathStack通过Remove相关接口去实现删除页面栈中特定页面的功能。
  1. // 删除栈中name为PageOne的所有页面
  2. this.pageStack.removeByName("PageOne")
  3. // 删除指定索引的页面
  4. this.pageStack.removeByIndexes([1,3,5])
复制代码
参数获取

NavPathStack通过Get相关接口去获取页面的一些参数。
  1. // 获取栈中所有页面name集合
  2. this.pageStack.getAllPathName()
  3. // 获取索引为1的页面参数
  4. this.pageStack.getParamByIndex(1)
  5. // 获取PageOne页面的参数
  6. this.pageStack.getParamByName("PageOne")
  7. // 获取PageOne页面的索引集合
  8. this.pageStack.getIndexByName("PageOne")
复制代码
路由拦截

NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法必要传入一个NavigationInterception对象，该对象包含三个回调函数：
属性名称形貌willShow页面跳转前回调，允许操作栈，在当前跳转生效。didShow页面跳转后回调，在该回调中操作栈会在下一次跳转生效。modeChangeNavigation单双栏显示状态发生变动时触发该回调。
  1. this.pageStack.setInterception({
  2.   willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
  3.     operation: NavigationOperation, animated: boolean) => {
  4.     if (typeof to === "string") {
  5.       console.log("target page is navigation home page.");
  6.       return;
  7.     }
  8.     // 将跳转到PageTwo的路由重定向到PageOne
  9.     let target: NavDestinationContext = to as NavDestinationContext;
  10.     if (target.pathInfo.name === 'PageTwo') {
  11.       target.pathStack.pop();
  12.       target.pathStack.pushPathByName('PageOne', null);
  13.     }
  14.   }
  15. })
复制代码
子页面

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



  • 尺度类型
    NavDestination组件默以为尺度类型，此时mode属性为NavDestinationMode.STANDARD。尺度类型的NavDestination的生命周期跟随其在NavPathStack页面栈中的位置变革而改变。
  • 弹窗类型
    NavDestination设置mode为NavDestinationMode.DIALOG弹窗类型，此时整个NavDestination默认透明显示。弹窗类型的NavDestination显示和消失时不会影响下层尺度类型的NavDestination的显示和生命周期，两者可以同时显示。
页面生命周期

Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件事件的情势开放。
其生命周期大致可分为三类，自界说组件生命周期、通用组件生命周期和自有生命周期（此中aboutToAppear和aboutToDisappear是自界说组件的生命周期。如果NavDestination外层包含自界说组件时则存在；OnAppear和OnDisappear是组件的通用生命周期，剩下的六个生命周期为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。
    1. import observer from '@ohos.arkui.observer';
    3. // NavDestination内的自定义组件
    4. @Component
    5. struct MyComponent {
    6.    navDesInfo: observer.NavDestinationInfo | undefined
    8.    aboutToAppear(): void {
    9.      this.navDesInfo = this.queryNavDestinationInfo();
    10.    }
    12.    build() {
    13.        Column() {
    14.          Text("所属页面Name: " + this.navDesInfo?.name)
    15.        }.width('100%').height('100%')
    16.    }
    17. }
    复制代码
  • 页面状态监听
    通过@ohos.arkui.observer提供的注册接口可以注册NavDestination生命周期变革的监听，使用方式如下：
    1.         observer.on('navDestinationUpdate', (info) => {
    2.      console.info('NavDestination state update', JSON.stringify(info));
    3. });
    复制代码
    也可以注册页面切换的状态回调，能在页面发生路由切换的时候拿到对应的页面信息NavDestinationSwitchInfo，而且提供了UIAbilityContext和UIContext不同范围的监听：
    1. // 在UIAbility中使用
    2. import observer from '@ohos.arkui.observer';
    3. import { UIContext } from '@ohos.arkui.UIContext';
    5. // callBackFunc 是开发者定义的监听回调函数
    6. function callBackFunc(info: observer.NavDestinationSwitchInfo) {}
    7. observer.on('navDestinationSwitch', this.context, callBackFunc);
    9. // 可以通过窗口的getUIContext()方法获取对应的UIContent
    10. uiContext: UIContext | null = null;
    11. observer.on('navDestinationSwitch', this.uiContext, callBackFunc);
    复制代码
页面专场

关闭专场



  • 全局关闭
    Navigation通过NavPathStack中提供的disableAnimation方法可以在当前Navigation中关闭或打开全部转场动画。
    1. pageStack: NavPathStack = new NavPathStack()
    3. aboutToAppear(): void {
    4.   this.pageStack.disableAnimation(true)
    5. }
    复制代码
  • 单次关闭
    NavPathStack中提供的Push、Pop、Replace等接口中可以设置animated参数，默以为true表现有转场动画，必要单次关闭转场动画可以置为false，不影响下次转场动画。
    1. pageStack: NavPathStack = new NavPathStack()
    3. this.pageStack.pushPath({ name: "PageOne" }, false)
    4. this.pageStack.pop(false)
    复制代码
自界说专场

Navigation通过customNavContentTransition事件提供自界说转场动画的本领，通过如下三步可以界说一个自界说的转场动画。

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

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

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

通过静态import页面再举行路由跳转的方式会造成不同模块之间的依赖耦合，以及首页加载时间长等题目。
动态路由设计的目的就是为了解决多个模块（HAR/HSP）之间可以复用雷同的业务，各个业务模块之间解耦和路由功能扩展整合。
动态路由的上风：


  • 路由界说除了跳转的URL以外，可以丰富的配置扩展信息，如横竖屏默认模式，是否必要鉴权等等，做路由跳转时统一处置惩罚。
  • 给每个路由页面设置一个名字，按照名称举行跳转而不是文件路径。
  • 页面的加载可以使用动态Import（按需加载），防止首个页面加载大量代码导致卡顿。
动态路由提供系统路由表和自界说路由表两种方式：


  • 系统路由表相对自界说路由表，使用更简单，只必要添加对应页面跳转配置项，即可实现页面跳转。
  • 自界说路由表使用起来更复杂，但是可以根据应用业务举行定制处置惩罚。
系统路由表

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

  • 在跳转目标模块的配置文件module.json5添加路由表配置：
    1.   {
    2.     "module" : {
    3.       "routerMap": "$profile:route_map"
    4.     }
    5.   }
    复制代码
  • 添加完路由配置文件地址后，必要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息：
    1.   {
    2.     "routerMap": [
    3.       {
    4.         "name": "PageOne",
    5.         "pageSourceFile": "src/main/ets/pages/PageOne.ets",
    6.         "buildFunction": "PageOneBuilder",
    7.         "data": {
    8.           "description" : "this is PageOne"
    9.         }
    10.       }
    11.     ]
    12.   }
    复制代码
      属性名称属性说明name跳转页面名称。pageSourceFile跳转目标页在包内的路径，相对src目录的相对路径。buildFunction跳转目标页的入口函数名称，必须以@Builder修饰。data应用自界说字段。可以通过配置项读取接口getConfigInRouteMap获取。
  • 在跳转目标页面中，必要配置入口Builder函数，函数名称必要和router_map.json配置文件中的buildFunction保持一致，否则在编译时会报错。
    1.   // 跳转页面入口函数
    2.   @Builder
    3.   export function PageOneBuilder() {
    4.     PageOne()
    5.   }
    7.   @Component
    8.   struct PageOne {
    9.     pathStack: NavPathStack = new NavPathStack()
    11.     build() {
    12.       NavDestination() {
    13.       }
    14.       .title('PageOne')
    15.       .onReady((context: NavDestinationContext) => {
    16.          this.pathStack = context.pathStack
    17.       })
    18.     }
    19.   }
    复制代码
  • 通过pushPathByName等路由接口举行页面跳转。(注意：此时Navigation中可以不用配置navDestination属性)
    1.   @Entry
    2.   @Component
    3.   struct Index {
    4.     pageStack : NavPathStack = new NavPathStack();
    6.     build() {
    7.       Navigation(this.pageStack){
    8.       }.onAppear(() => {
    9.         this.pageStack.pushPathByName("PageOne", null, false);
    10.       })
    11.       .hideNavBar(true)
    12.     }
    13.   }
    复制代码
自界说路由表

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

  • 界说页面跳转配置项。

    • 使用资源文件举行界说，通过资源管理@ohos.resourceManager在运行时对资源文件解析。
    • 在ets文件中配置路由加载配置项，一般包括路由页面名称（即pushPath等接口中页面的别名），文件所在模块名称（hsp/har的模块名），加载页面在模块内的路径（相对src目录的路径）。

  • 加载目标跳转页面，通过import将跳转目标页面所在的模块在运行时加载, 在模块加载完成后，调用模块中的方法，通过import在模块的方法中加载模块中显示的目标页面，并返回页面加载完成后界说的Builder函数。
  • 触发页面跳转，在Navigation的.navDestination属性执行步骤2中加载的Builder函数，即可跳转到目标页面。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

北冰洋以北

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表