介紹

Navigator 2.0 是由 Flutter 團(tuán)隊(duì)引入的，用于處理復(fù)雜的路由 Navigator 1.0，它只是簡(jiǎn)單地從堆棧中添加和刪除頁(yè)面，這些頁(yè)面對(duì)于處理 Flutter Web 的深度鏈接或URI 解析非常復(fù)雜，因此 Navigator 2.0 來(lái)拯救還是它？。

Flutter Navigator 2.0：什么以及為什么？

Navigator 2.0 是一個(gè)由 flutter 創(chuàng)建的聲明式 API，與 Navigator 1.0 不同，Navigator 1.0 是一個(gè)命令式 API，但從根本上講，它也以命令式風(fēng)格工作。

Navigator 1.0 的局限性

在 navigator 1.0 中，我們提供了一個(gè)堆棧，我們可以向其推送或彈出頁(yè)面，這非常簡(jiǎn)單方便，直到我們的應(yīng)用程序具有簡(jiǎn)單的路由，即很少的屏幕并且不需要在 web 上使用。

當(dāng)我們需要制作復(fù)雜的應(yīng)用程序、實(shí)施“深度鏈接”、從通知直接轉(zhuǎn)到產(chǎn)品頁(yè)面、操作系統(tǒng)事件處理和用于 Flutter Web 后退按鈕處理的 URI 解析時(shí)，問(wèn)題就開始了。

為什么選擇 Flutter Navigator 2.0？

然后是 Navigator 2.0，它是聲明式的，即，您可以更好地控制導(dǎo)航堆棧；使用 nav 2.0，我們根據(jù)我們的應(yīng)用程序狀態(tài)控制堆棧并處理操作系統(tǒng)觸發(fā)的后退按鈕事件使用它，我們不僅可以從頂部推送和彈出，還可以通過(guò)提供頁(yè)面列表和 URI 從任何我們想要的地方使用 routeInformationParser 和 provider 進(jìn)行解析。

教程目標(biāo)

在我們的教程中，我們將構(gòu)建一個(gè)包含兩個(gè)屏幕的簡(jiǎn)單演示應(yīng)用程序：

• 動(dòng)漫角色屏幕 1：它將顯示動(dòng)漫角色列表。

• Screen 2 for Character Details：它通過(guò)回調(diào)函數(shù)連接到屏幕 1，顯示屏幕 1 中所選角色的詳細(xì)信息。

目標(biāo)：演示 Navigator 2.0 的工作原理，即根據(jù)我們的應(yīng)用程序狀態(tài)更改屏幕(selectedChar != null)不使用簡(jiǎn)單的 POP & PUSH，而是通過(guò) Navigator 將我們的頁(yè)面堆棧傳遞給 MaterialApp

使用 Bacancy 開發(fā) Flutter 應(yīng)用程序更輕松、更輕松！
您是否正在為您的需求尋找一流的 Flutter 開發(fā)人員？相信我們的專業(yè)知識(shí)！立即聯(lián)系我們并聘請(qǐng)F(tuán)lutter 開發(fā)人員。

Flutter Navigator 2.0 示例

Navigator 2.0 添加了額外的類來(lái)將應(yīng)用程序屏幕實(shí)現(xiàn)為應(yīng)用程序狀態(tài)的產(chǎn)物，并能夠解析來(lái)自 Flutter Web 的 URL 的路由。Navigator 2.0 提供了一種新的聲明式 API 設(shè)計(jì)，即

• 頁(yè)面：頁(yè)面用于現(xiàn)有的導(dǎo)航器。用于設(shè)置導(dǎo)航器歷史堆棧的不可變頁(yè)面。它描述了需要放置在導(dǎo)航器歷史堆棧中的頁(yè)面。

• 路由器：這是一個(gè)新的小部件，用于包裝導(dǎo)航器并根據(jù)應(yīng)用程序狀態(tài)配置其當(dāng)前頁(yè)面列表。它還可以偵聽(tīng)來(lái)自操作系統(tǒng)的事件并相應(yīng)地配置導(dǎo)航器。

在我們的示例：Flutter Navigator 2.0 中，我們將基本上開發(fā)一個(gè) Flutter 應(yīng)用程序并學(xué)習(xí)如何添加頁(yè)面和路由器。

有四個(gè)類，如下所述：

• 路由器信息解析器

• 路由代理

• 路由器信息提供者

• 返回按鈕調(diào)度程序

我們將在另一個(gè)博客中討論它們，因?yàn)樗鼤?huì)造成不必要的混淆?，F(xiàn)在，我們將使本教程保持簡(jiǎn)單，但保證在將來(lái)詳細(xì)介紹它們。

這些是我們將要使用的類。

• Anime_Characters 屏幕：顯示動(dòng)漫角色列表。

• Characters_Details 屏幕：在選擇特定角色時(shí)，一個(gè)新屏幕被推入堆棧并顯示該角色所屬的動(dòng)漫。

• Anime_Char_Model：它只是一個(gè)動(dòng)漫角色的模型類，有名稱、動(dòng)漫和構(gòu)造函數(shù)。

• App 類：這是一個(gè)簡(jiǎn)單的類，負(fù)責(zé) Material 小部件并相應(yīng)地處理所有導(dǎo)航和跟蹤應(yīng)用程序狀態(tài)。

現(xiàn)在讓我們?cè)趹?yīng)用程序狀態(tài)中設(shè)置我們的頁(yè)面。之后，創(chuàng)建一個(gè)變量來(lái)跟蹤應(yīng)用程序狀態(tài)并進(jìn)一步根據(jù)狀態(tài)顯示屏幕。

https://gist.github.com/MukulKrSingh/0cfe0dddc39d718e303fb5bbe0c1544d

// ignore_for_file: dead_code, prefer_const_constructors導(dǎo)入“包：flutter/material.dart”；導(dǎo)入“package:navigator_2/Models/anime_char_model.dart”；導(dǎo)入“package:navigator_2/Screens/anime_characters.dart”；導(dǎo)入“包：navigator_2/customRoute.dart”；類 MyApp 擴(kuò)展 StatefulWidget {
  const MyApp({Key?key}) : super(key: key);
  @覆蓋
  狀態(tài)createState() => _MyAppState();}類 _MyAppState 擴(kuò)展?fàn)顟B(tài){
  //動(dòng)畫角色模型？_selectedChar = AnimeCharModel('Escanor', '7 大罪');
  動(dòng)漫角色模型？_selectedChar；
  //布爾未知=假；
  列表動(dòng)畫字符 = [
    AnimeCharModel('柱間', '火影忍者'),
    AnimeCharModel('斑', '火影忍者'),
    AnimeCharModel('Gojo', '柔術(shù)會(huì)戰(zhàn)'),
    AnimeCharModel('索隆', '海賊王')
  ];
  void onCharTapped(AnimeCharModel selectedChar) {
    設(shè)置狀態(tài)（（）{
      _selectedChar = selectedChar;
      //打印（selectedChar.anime）；
    });
  }
  @覆蓋
  小部件構(gòu)建（BuildContext 上下文）{
    返回 MaterialApp(
      title: '動(dòng)漫人物',
      主頁(yè)：導(dǎo)航器（
        // 忽略：prefer_const_literals_to_create_immutables
        頁(yè)數(shù)：[
          素材頁(yè)(
            key: ValueKey('anime_chars'),
            孩子：AnimeChars（
              動(dòng)漫人物：動(dòng)漫人物，
              onTapped：onCharTapped，
            ),
          ),
          如果（_selectedChar！= null）CustomRoute（字符：_selectedChar）
        ],
        
        onPopPage：（路線，結(jié)果）{
          如果（！route.didPop（結(jié)果））{
            返回假；
          }
          設(shè)置狀態(tài)（
            () {
              _selectedChar = 空；
            },
          );
          返回真；
        },
      ),
    );
  }}

在這里您可以看到我們已經(jīng)通過(guò)將 MaterialPage 作為自定義路由的每個(gè)頁(yè)面的子級(jí)傳遞來(lái)設(shè)置我們的頁(yè)面。只是為了表明我們也可以根據(jù)需要配置頁(yè)面，例如，我為 Character_details 屏幕創(chuàng)建了一個(gè) customRoute.dart。

頁(yè)面：我們將使用密鑰來(lái)唯一標(biāo)識(shí)每個(gè)頁(yè)面。

onPopPage：使用onPopPage是為了保證我們?cè)趫?zhí)行POP的過(guò)程中不會(huì)進(jìn)入任何意外的狀態(tài)。當(dāng) POP 操作成功時(shí)，它返回 true 否則返回 false。

List<> animeChars：它包含要傳遞給的動(dòng)漫角色列表動(dòng)漫人物畫面。

_selectedChar：用于跟蹤應(yīng)用程序的狀態(tài)以顯示角色詳情屏幕。

因此，這是關(guān)于在我們的 Flutter 應(yīng)用程序中實(shí)現(xiàn) Navigator 2.0。

Github 存儲(chǔ)庫(kù)：Flutter Navigator 2.0 示例

至此，我們已經(jīng)提到了 Navigator 2.0 的核心實(shí)現(xiàn)。其余代碼只是所有類之間的連接。對(duì)于整個(gè)應(yīng)用程序，您可以克隆源代碼并隨意使用它。

Navigator 2.0 的發(fā)布有一個(gè) google dev fest，你也可以看看
Chun-heng-Tai 的 Dev Fest GDG Saudi Arabia。

Navigator 2.0 中還有哪些內(nèi)容？

到現(xiàn)在為止，我們才剛剛開始以聲明方式管理依賴于應(yīng)用程序狀態(tài)的路由，而不是告訴我們自己去做?，F(xiàn)在剩下的主要是flutter web 部件，它解析 URL 以直接轉(zhuǎn)到某些頁(yè)面，反之亦然。

為了完成剩下的部分，我們將為您提供 Flutter 團(tuán)隊(duì)用來(lái)解釋 Navigator 2.0 的架構(gòu)。您可以研究它并了解正在發(fā)生的事情，以便在我們的下一個(gè)博客/視頻中了解更多信息。即使您沒(méi)有徹底了解它，我們也一定會(huì)深入介紹它。

結(jié)論

（言鼎科技）