導航和路由

使用導覽器
使用具名路由
- 限制
使用路由器（Router）
同時使用路由器（Router）和導航器（Navigator）
網頁支援
更多資訊

Flutter 提供了一套完整的系統，用於在畫面之間導航和處理深層連結。小型應用程式若沒有複雜的深層連結需求，可以使用 Navigator；而具有特定深層連結和導航需求的應用程式，則應同時使用 Router，以正確處理 Android 和 iOS 上的深層連結，並在應用程式於網頁上執行時，保持與網址列同步。

若要設定您的 Android 或 iOS 應用程式以處理深層連結，請參閱深層連結。

Navigator 元件會以堆疊方式顯示畫面，並使用目標平台的正確轉場動畫。要導航至新的畫面，請透過路由的 BuildContext 存取 Navigator，並呼叫必要的函式，例如 push() 或 pop()。

dartonPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

因為 Navigator 會維護 Route 物件的堆疊（代表歷史堆疊），所以 push() 函式也會接受 Route 物件。MaterialPageRoute 物件是 Route 的子類別，用於指定 Material Design 的轉場動畫。如需更多關於如何使用 Navigator 的範例，請依照 Flutter Cookbook 中的導航食譜，或造訪 Navigator API 文件。

具有簡單導航和深層連結需求的應用程式，可以使用 Navigator 進行導航，並使用 MaterialApp.routes 參數來處理深層連結。

dart@override
Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

在此指定的路由稱為具名路由。如需完整的範例，請依照 Flutter Cookbook 中的使用具名路由導航食譜。

雖然具名路由可以處理深層連結，但其行為始終相同且無法自訂。當平台收到新的深層連結時，無論使用者目前在哪裡，Flutter 都會將新的 Route 推入導航器（Navigator）中。

對於使用具名路由的應用程式，Flutter 也不支援瀏覽器的「上一頁」按鈕。基於這些原因，我們不建議在大多數應用程式中使用具名路由。

具有進階導航和路由需求的 Flutter 應用程式（例如使用直接連結至每個畫面的網頁應用程式，或具有多個 Navigator 元件的應用程式），應使用路由套件，例如 go_router，它可以解析路由路徑，並在應用程式收到新的深層連結時設定 Navigator。

若要使用 Router，請在 MaterialApp 或 CupertinoApp 上切換至 router 建構子，並為其提供 Router 設定。路由套件，例如 go_router，通常會為您提供設定。例如：

dartMaterialApp.router(
  routerConfig: GoRouter(
    // …
  )
);

因為像 go_router 這類的套件是宣告式的，它們在收到深層連結時，始終會顯示相同的畫面。

Router 和 Navigator 的設計旨在協同運作。您可以使用 Router API 透過宣告式路由套件（例如 go_router）進行導航，也可以在 Navigator 上呼叫必要的函式（例如 push() 和 pop()）進行導航。

當您使用 Router 或宣告式路由套件進行導航時，Navigator 上的每個路由都是頁面支援的，這表示它是使用 Page 從 Navigator 建構子上的 pages 引數建立的。反之，透過呼叫 Navigator.push 或 showDialog 建立的任何 Route，都會在 Navigator 中新增一個無頁面支援的路由。如果您使用的是路由套件，則頁面支援的路由永遠都是可深層連結的，而無頁面支援的路由則否。

當從 Navigator 中移除頁面支援的 Route 時，其後的所有無頁面支援路由也會一併移除。例如，如果深層連結透過從 Navigator 中移除頁面支援的路由進行導航，則其後的所有無頁面支援路由（直到下一個頁面支援的路由）也會被移除。

使用 Router 類別的應用程式會與瀏覽器 History API 整合，以便在使用瀏覽器的「上一頁」和「下一頁」按鈕時提供一致的體驗。每當您使用 Router 進行導航時，都會在瀏覽器的歷史堆疊中新增一個 History API 條目。按下上一頁按鈕會使用反向時間順序導航，這表示使用者會回到先前使用 Router 顯示的位置。這表示，如果使用者從 Navigator 中彈出一個頁面，然後按下瀏覽器的上一頁按鈕，則先前的頁面會重新推回堆疊中。

如需有關導航和路由的更多資訊，請查看以下資源：

Flutter Cookbook 包含多個導航食譜，示範如何使用 Navigator。
Navigator 和 Router API 文件包含如何在沒有路由套件的情況下設定宣告式導航的詳細資訊。
了解導航是 Material Design 文件中的一個頁面，其中概述了在應用程式中設計導航的概念，包括對前向導航、向上導航和時間順序導航的解釋。
學習 Flutter 的新導航和路由系統，是一篇 Medium 上的文章，其中描述了如何直接使用 Router 元件，而無需路由套件。
Router 設計文件包含 Router API 的動機和設計。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新時間為 2024-07-18。檢視原始碼或回報問題。

使用導覽器

使用具名路由

限制

使用路由器（Router）

同時使用路由器（Router）和導航器（Navigator）

網頁支援

更多資訊