HarmonyOS NEXT應用開發——Navigation開發 頁面切換場景範例

生活就是这么怪發表於2024-04-13
Navigation

簡介

在應用開發時，我們常常遇到，需要在應用內多頁面跳轉場景時中使用Navigation導航元件做統一的頁面跳轉管理，它提供了一系列屬性方法來設定頁面的標題欄、工具欄以及選單欄的各種展示樣式。除此之外還擁有動態載入，navPathStack路由跳轉。

本文就以Navigation頁面切換範例為例，來展開講解Navigation以上的技術點，幫助開發者快速學習。

場景概述

ArkUI中，應用內導航元件Navigation一般作為Page頁面的根容器， Navigation元件主要包含主頁和內容頁。
主頁內容區預設首頁顯示導航內容(Navigation的子元件) 或非首頁顯示(NavDestination的子元件)，首頁和非首頁透過路由進行切換。
Navigation的路由切換的方式有兩種，本次示例主要介紹NavPathStack的使用。

  • 在API Version 9上，首頁導航內容需要配合NavRouter元件實現頁面路由。
  • 從API Version 10開始，首頁推薦使用NavPathStack配合NavDestination屬性進行頁面路由。

透過本篇文章的學習，你將學會：
1.如何使用NavPathStack路由轉場
2.如何在Navigation中跨包引用hsp
3.如何在Navigation中使用動態載入

Router與Navigation適用場景對比

元件 適用場景 特點 轉場動畫效果對比
Router 模組間與模組內頁面切換 透過每個頁面的url實現模組間解耦 頁面平推轉場效果
Navigation 模組內頁面切換 透過元件級路由統一路由管理 向右摺疊轉場效果

使用NavPathStack路由轉場

  • NavPathStack有兩種路由切換方法，一種是pushPath，如主頁---->設定頁面，透過使用this.pageStack.pushPath({ name: url })進行跳轉，另外一種是pushPathByName，如主頁---->詳情頁面，透過使用this.pageStack.pushPathByName(name, item)進行跳轉，其中item為需要傳遞的引數。

    • NavPathStack支援pop、move、clear方法的使用；pop方法的作用是彈出路由棧棧頂元素，如首頁進入商品詳情頁面，在詳情頁面使用this.pageStack.pop()方法返回到首頁，clear方法的作用是清除棧中所有頁面， 如首頁跳轉到詳情頁面，詳情頁面再進入直播頁面，在直播頁面透過使用this.pageStack.clear()直接返回到首頁。除此之外，還有popTo(回退路由棧到第一個名為name的NavDestination頁面)、 popToIndex(回退路由棧到index指定的NavDestination頁面)、moveToTop(將第一個名為name的NavDestination頁面移到棧頂)、moveIndexToTop(將index指定的NavDestination頁面移到棧頂)方法, 由於本示例暫時沒有合適的按鈕去承載這些功能，所以本示例未體現。

    • 路由棧資訊,如下所示

獲取棧中所有NavDestination頁面的名稱：this.pageInfos.getAllPathName()
獲取index指定的NavDestination頁面的引數資訊：this.pageInfos.getParamByIndex(1)
獲取全部名為name的NavDestination頁面的引數資訊：this.pageInfos.getParamByName('pageTwo')
獲取全部名為name的NavDestination頁面的位置索引：this.pageInfos.getIndexByName('pageOne')
獲取棧大小：this.pageInfos.size()

實現思路

透過this.pageStack.pushPath({ name: url param: item })進行頁面之間的跳轉，navpathstack詳情。

開發步驟

透過onclick事件呼叫NavPathStack.pushPath方法跳轉頁面。原始碼參考MainPage.ets

Column()
  .onClick(() => {
    this.pageStack.pushPath({ name: listData.moduleName, param: listData.param });
  })

相關文章