此文章僅供學(xué)習(xí)，不作其他用途。
如有侵權(quán)，請聯(lián)系刪除。
歡迎批評指正！?。?謝謝?。?！

Navigation

Navigation組件是路由導(dǎo)航的根視圖容器，一般情況下作為根容器使用。

一、 使用配置文件進行頁面跳轉(zhuǎn)

1. 創(chuàng)建一個根頁面視圖 NavPathStackDemo.ets

代碼如下：

@Entry
@Preview
@Component
struct NavPathStackDemo {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath')
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' })
          })
      }
    }
  }
}

注意：

• @Entry裝飾器修飾的頁面，需要在 main_pages.json文件中引用，否則會報錯。
• @Preview裝飾器是可以在模擬器中預(yù)覽該頁面。可以不寫。
• @Component裝飾器是標配，不說了。

2. 寫子頁面PageOne.ets

代碼如下：

@Builder
export function PageOneBuilder(name: string, param: object) {
  PageOne();
}

@Component
struct PageOne {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
      }
    }
    .title('PageOne')
  }
}

PageOneBuilder函數(shù)是需要注意的。使用@Builder裝飾器。別忘了 export關(guān)鍵字

3. 配置文件

在路徑 src/main/resources/base/profile 文件夾下，配置 route_map.json文件，代碼如下：

{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/view/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}

注意：

• name: 對應(yīng)的就是 跳轉(zhuǎn)頁面時寫的 this.pageInfos.pushPath({ name: 'pageOne' })
• pageSourceFile: 對應(yīng)的是需要跳轉(zhuǎn)的頁面的路徑
• buildFunction: 對應(yīng)的是 子頁面中 使用 @Builder修飾的函數(shù)（創(chuàng)建子頁面對象）
• 'data': 可寫可不寫

4. 在工程文件中配置route_map.json文件

找到 工程配置文件 module.json5文件， 在 module里邊配置 routerMap屬性，如下所示：

{
  "module": {
    ...
    "routerMap": "$profile:route_map"
  }
}

接下來，就可以運行程序，測試Navigation的跳轉(zhuǎn)效果了。

5. onReady的使用

場景：如果在PageOne頁面中，繼續(xù)跳轉(zhuǎn)下一個頁面PageTwo
PageTwo.ets代碼如下：

@Builder
export function PageTwoBuilder(name: string) {
  PageTwo();
}

@Component
export struct PageTwo {
  pathStack: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column() {
        Text('Page Two')
        Button('Go To Page Three!', {type: ButtonType.Capsule})
          .onClick(() => {
            this.pathStack.pushPath({ name: 'pageThree'})
          })
      }
    }
  }
}

在route_map.json文件中配置如下：

{
      "name": "pageTwo",
      "pageSourceFile": "src/main/ets/view/PageTwo.ets",
      "buildFunction": "PageTwoBuilder"
    },

運行程序，當點擊 PageOne頁面中的pushPathByName按鈕跳轉(zhuǎn)PageTwo頁面時，會沒有反應(yīng)，無法進行跳轉(zhuǎn)。這時就需要用到onReady。
先來看一下官方解釋：

onReady

onReady回調(diào)函數(shù)中有一個 NavDestinationContext參數(shù)，可以通過這個參數(shù)拿到當前NavDestination所處的頁面棧。
PageOne.ets中代碼如下（部分代碼已省略）：

@Builder
export function PageOneBuilder(name: string, param: object) {
  PageOne();
}

@Component
struct PageOne {
  pageInfos: NavPathStack = new NavPathStack();
  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPathByName("pageTwo", null);
          })
      }
    }
    .title('PageOne')
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
    })
  }
}

再次運行程序，點擊pushPathByName按鈕，可以看到跳轉(zhuǎn)到PageTwo頁面了。

PageTwo頁面

二、 使用navDestination屬性

1. 創(chuàng)建主頁面NavPathStackDemoTwo.ets文件

代碼如下：

import { MinePage } from '../view/MinePage';

@Entry
@Preview
@Component
struct NavPathStackDemoTwo {
  @Provide('pathStack') pageInfos: NavPathStack = new NavPathStack();
  @Builder
  PageTo(name: string) {
    if (name === 'mine_page') {
      MinePage();
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('Go to mine page!')
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'mine_page' })
          })
      }
    }
    .navDestination(this.PageTo)
  }
}

注意：navPathStack變量使用的是 @Provide('xxx)修飾
@Provide(xxx)修飾的變量：會將該變量也就是navPathStack傳遞給跳轉(zhuǎn)后的后代組件
而后代組件在獲取時，需要使用@Consume來修飾，后邊會有代碼體現(xiàn)并講解@Consume。

navDestination(builder: (name: string, param: unknown) => void): NavigationAttribute;

Set builder for user-defined NavDestination component.
翻譯之后：用戶自定義 NavDestination 組件的集合構(gòu)造器
需要傳入一個自定義的集合構(gòu)造器 builder，也就是上邊代碼中使用 @Builder修飾的PageTo， 可以看到需要傳入一個name的形參，param不是必傳
注意： 這里的name 就是通過 this.pageInfos.pushPath({ name: 'mine_page' }) 中的name參數(shù)傳入，
在PageTo內(nèi)部通過對name值的匹配來控制需要做的事情。

2. 創(chuàng)建后代組件MinePage.ets

代碼如下：

@Component
export struct MinePage {
  @Consume pathStack: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Text('Mine Page')
        Button('跳轉(zhuǎn)到設(shè)置頁面')
          .onClick(() => {
            this.pathStack.pushPathByName('settingPage', null);
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#f1f3f5')
    }
    .title('我的')
    .backgroundColor('#f1f3f5')
  }
}

運行程序，點擊按鈕，則會跳轉(zhuǎn)到settingPage所指向的SettingPage頁面。依然是在route_map.json中配置。
有三點需要注意的地方：

1. @Consume: 通過@Consume裝飾器在后代組件中拿到祖代組件傳遞過來的路由棧數(shù)據(jù)。
2. @Consume pathStack: NavPathStack;: 其中的 pathStack變量命名需要和祖代組件中@Provide(xxx)中的 xxx保持一致的命名。
3. 這里不再使用onReady去獲取當前路由棧信息

在SettingPage頁面如果還需要跳轉(zhuǎn)到 更下層的頁面，依然可以使用@Consume修飾的變量xxx，獲取到祖代傳遞過來的路由棧數(shù)據(jù)。
SettingPage代碼如下：

@Builder
export function SettingPageBuilder() {
  SettingPage();
}

@Entry
@Component
export struct SettingPage {
  @Consume pathStack: NavPathStack;
  build() {
    NavDestination() {
      Column() {
        Text('設(shè)置頁面---')
        Button('測試', { type: ButtonType.Capsule })
          .onClick(() => {
            this.pathStack.pushPathByName('pageThree', null);
          })
      }
      .width('100%')
      .height('100%')
    }
  }
}