flutter的導航和路由使用範例詳解

導航和路由

Flutter提供了一個完整的用於在螢幕之間導航和處理深層連結的系統。沒有複雜深度連結的小型應用程式可以使用Navigator，而具有特定深度連結和導航要求的應用程式也應該使用Router來正確處理Android和iOS應用上的深度連結，並在應用程式在web上執行時與位址列保持同步。

使用Navigator導航

Navigator導航組可以用正確的過渡動畫來展示對應的介面，當然，和web端的路由類似，介面其實也是以棧的形式儲存著。

通過路由的buildContext上下文，並且呼叫對應的push()或pop()方法，我們就可以導航到新的介面，比如：

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

由於Navigator儲存了一個Route物件的堆疊（表示歷史堆疊），所以push（）方法也使用Route物件作為引數。MaterialPageRoute物件是Route的子類，用於指定Material Design的過渡動畫。

命名路由

對於有些具有簡單導航和深度連結需求的應用程式，我們可以使用Navigator進行導航，使用MaterialApp物件的routes屬性對路由進行設定：

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

我們在這裡設定的路由就是命名路由。

命名路由的侷限

儘管命名路由可以處理深層連結，但是他們的表現總是一致的，沒辦法做到自定義。當應用平臺接收到一個新的深層連結，不論使用者此時在哪個位置，Flutter都會將新的路線推播到導航器上。

使用命名路由的Flutter應用也不支援瀏覽器的前進按鈕。基於這些原因，官方其實是不建議在大多數應用中使用命名路由。

當然，實際開發過程中，我們需要根據實際情況進行調整。

使用路由Router

具有高階導航和路由要求的Flutter應用程式（例如使用到每個螢幕的直接連結的web應用程式，或具有多個,或者巢狀導航Navigator元件的應用程式）應使用諸如go_router之類的路由包，該包可以在應用程式收到新的深度連結時解析路由路徑並設定Navigator。

要使用路由，我們需要切換到MaterialApp或Cupertino App上的路由器建構函式，併為其提供路由器設定。

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

由於像go_router這樣的包是宣告性的，所以當接收到深度連結時，它們將始終顯示相同的介面。

同時使用Router和Navigator

Router和Navigator在設計時就可以協同工作。我們可以使用像go_router這樣的路由包的 API進行路由的跳轉，也可以使用Navigator的push()或pop()方法進行導航。

當我們使用Router或宣告性路由包進行導航時，Navigator上的每個路由頁面都是支援的。這表示，路由是根據頁面上的使用了頁面上引數的Navigator建構函式建立的路由。

相反，通過呼叫Navigator.push()等方法的路由導航，將會在導航中新增一個pageless(無頁面)的路由。如果我們使用的是路由包，則頁面支援的路由始終是可深度連結的，而無頁面的路由則不是。

當從導航器中刪除頁面支援的路由時，它之後的所有無頁面路由也將被刪除。例如，如果深度連結通過從導航器中刪除頁面支援的路由來導航，則之後（直到下一個_pagebacked路由）的所有無頁面路由也將被刪除。

深度連結 Deep linking

Flutter支援iOS、Android和web瀏覽器上的深度連結。開啟URL會在應用程式中顯示該螢幕。通過以下步驟，我們可以使用命名路由（使用routes引數或onGenerateRoute）或使用Router小部件啟動和顯示路由。

如果我們在web瀏覽器中執行應用程式，則無需額外設定。路由路徑的處理方式與iOS或Android深度連結相同。預設情況下，web應用程式使用模式：/#/path/to/app/screen從url片段讀取深度連結路徑，但這可以通過設定應用程式的url策略來更改。

在 Android 上啟用 深度連結 Deep linking

只需要在AndroidManifest.xml組態檔中的<activity>標籤中新增一個後設資料標籤和意向過濾器標籤即可：

<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="flutterbooksample.com" />
    <data android:scheme="https" />
</intent-filter>

設定之後，重啟整個應用即可。

在 ios 上啟用 深度連結 Deep linking

需要在ios/Runner資料夾下Info.plist檔案中新增兩個新的key：

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>flutterbooksample.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>customscheme</string>
    </array>
    </dict>
</array>

CFBundleURLName是一個唯一的URL，用於將我們的應用程式與其他使用相同方案的應用程式進行區分。

設定完成後，同樣需要進行應用的重啟。

在web上設定URL策略

flutter web 應用支援兩種URL策略：

• hash模式。如：flutterexample.dev/#/path/to/screen.
• path模式。如：lutterexample.dev/path/to/screen.

設定起來也很簡單，從flutter_web_plugins外掛庫匯入usePathUrlStrategy方法，在入口函數中呼叫即可。

import 'package:flutter_web_plugins/url_strategy.dart';
void main() {
  usePathUrlStrategy();
  runApp(ExampleApp());
}

PathUrlStrategy使用歷史API，這需要對web伺服器進行額外設定，具體怎麼設定，應該跟nginx相關～

最後

熟悉了導航和路由，再加深一下對元件裡的理解記憶，後面熟悉一下介面請求的方式，基本上就可以開始做flutter應用的開發了～

以上就是flutter的導航和路由使用範例詳解的詳細內容，更多關於flutter 導航路由的資料請關注it145.com其它相關文章！