鴻蒙Navigation知識點詳解

龙儿筝發表於2024-11-14

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)能夠複用相同的業務邏輯,實現各業務模組間的解耦,同時支援路由功能的擴充套件與整合。

動態路由提供系統路由表和自定義路由表兩種實現方式。支援自定義路由表和系統路由表混用。

  • 系統路由表相對自定義路由表,使用更簡單,只需要新增對應頁面跳轉配置項,即可實現頁面跳轉。

自定義路由表使用起來更復雜,但是可以根據應用業務進行定製處理。

相關文章