鴻蒙Navigation入門使用

龙儿筝發表於2024-11-14
鴻蒙Navigation

Navigation元件適用於模組內和跨模組的路由切換，透過元件級路由能力實現更加自然流暢的轉場體驗，並提供多種標題欄樣式來呈現更好的標題和內容聯動效果。一次開發，多端部署場景下，Navigation元件能夠自動適配視窗顯示大小，在視窗較大的場景下自動切換分欄展示效果。

根頁面設定

我們在Entry的入口處Index.ets使用Navigation當作根頁面，這裡會面臨一個問題，怎麼從啟動頁跳轉到首頁，並關閉啟動頁，使用首頁一直留在頁面棧中，不允許銷燬，在前面的文章《鴻蒙Navigation處理啟動頁跳轉到首頁問題》中有介紹處理方法，在此不展開。在使用Navigation時，由於預設帶有TitleBar和Toolbar，樣式不好自定義，我們直接隱藏TitleBar和Toolbar，實際需要的話，可以自己實現。由於預設是Auto模式，以便於適配大屏裝置，若我們在大屏裝置上不使用分欄效果，可以強制設定單頁面模式。

@Entry
@ComponentV2
struct Index {
  nav: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.nav)
    .mode(NavigationMode.Stack)
    .hideToolBar(true)
    .hideTitleBar(true)
    .height('100%')
    .width('100%')
  }
}

系統路由表配置

接下來我們需要配置系統路由表，在resources/base/profile目錄下新建一個json檔案，例如router_map.json，並在裡面配置相關的路由頁面，例如我們配置一個彈窗頁面和一個登入頁面。

{
  "routerMap": [
    {
      "name": "dialog",
      "pageSourceFile": "src/main/ets/pages/dialog/DialogPage.ets",
      "buildFunction": "dialogBuilder"
    },
    {
      "name": "login",
      "pageSourceFile": "src/main/ets/pages/login/LoginPage.ets",
      "buildFunction": "loginBuilder"
    }
  ]
}

在routerMap裡面配置具體的頁面，name為頁面名稱，使用push開啟新頁面時，傳的name名稱就是這裡定義的。pageSourceFile為頁面原始檔，buildFunction為頁面入口builder，透過原始檔找到這個入口builder。在module.json5檔案中有一個routerMap欄位，值為我們前面定義的router_map.json

實現子頁面

路由表字義好了後，我們需要實現具體的頁面，這裡分別實現一個彈窗頁面和標準頁面。彈窗示例如下，頁面模式需要設定為NavDestinationMode.DIALOG

@Builder
function dialogBuilder() {
  DialogPage()
}
@ComponentV2
export struct DialogPage {
  build() {
    NavDestination() {
      Stack() {
        Column() {
          Text('彈窗標題')
          Text('彈窗內容')

          Row() {
            Text('取消').layoutWeight(1)
            Text('確定').layoutWeight(1)
          }
        }
        .width('80%')
        .borderRadius(16)
        .backgroundColor($r('app.color.start_window_background'))
      }.width('100%').height('100%')
    }.hideTitleBar(true).mode(NavDestinationMode.DIALOG)
  }
}

標準登入頁面如下，預設為標準模式，mode可以省略不設定

@Builder
function loginBuilder() {
  LoginPage()
}
@ComponentV2
export struct LoginPage {
  build() {
    NavDestination() {
      Column() {
        Text('賬號')
        Text('密碼')
        Text('登入')
      }
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
  }
}

頁面跳轉操作

開啟新頁面

使用NavPathStack的pushPath或pushPathByName可以開啟一個新頁面，例如開啟登入頁面則是navPathStack.pushPathByName('login', undefined)，顯示一個彈窗則是navPathStack.pushPathByName('dialog', undefined)。可以發現使用Navigation來實現彈窗還是非常簡單的，而且可以全域性顯示，不依賴於具體頁面以及Context，而且彈窗還有顯示隱藏等回撥。

返回頁面

使用NavPathStack的pop方法關閉當前頁面，回到上一個頁面，我們還可以使用popToName返回到指定的頁面，也可以使用popToIndex返回到第幾個頁面，甚至還可以使用clear方法直接回到首頁，使用起來還是非常方便的。

相關文章