導航和路由

Flutter提供了一個完整的用于在屏幕之間導航和處理深層鏈接的系統(tǒng)。沒有復雜深度鏈接的小型應用程序可以使用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對象作為參數(shù)。MaterialPageRoute對象是Route的子類，用于指定Material Design的過渡動畫。

命名路由

對于有些具有簡單導航和深度鏈接需求的應用程序，我們可以使用Navigator進行導航，使用MaterialApp對象的routes屬性對路由進行配置：

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

我們在這里配置的路由就是命名路由。

命名路由的局限

盡管命名路由可以處理深層鏈接，但是他們的表現(xiàn)總是一致的，沒辦法做到自定義。當應用平臺接收到一個新的深層鏈接，不論用戶此時在哪個位置，F(xiàn)lutter都會將新的路線推送到導航器上。

使用命名路由的Flutter應用也不支持瀏覽器的前進按鈕?；谶@些原因，官方其實是不建議在大多數(shù)應用中使用命名路由。

當然，實際開發(fā)過程中，我們需要根據(jù)實際情況進行調整。

使用路由Router

具有高級導航和路由要求的Flutter應用程序（例如使用到每個屏幕的直接鏈接的web應用程序，或具有多個,或者嵌套導航Navigator組件的應用程序）應使用諸如go_router之類的路由包，該包可以在應用程序收到新的深度鏈接時解析路由路徑并配置Navigator。

要使用路由，我們需要切換到MaterialApp或Cupertino App上的路由器構造函數(shù)，并為其提供路由器配置。

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

由于像go_router這樣的包是聲明性的，所以當接收到深度鏈接時，它們將始終顯示相同的界面。

同時使用Router和Navigator

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

當我們使用Router或聲明性路由包進行導航時，Navigator上的每個路由頁面都是支持的。這表示，路由是根據(jù)頁面上的使用了頁面上參數(shù)的Navigator構造函數(shù)創(chuàng)建的路由。

相反，通過調用Navigator.push()等方法的路由導航，將會在導航中添加一個pageless(無頁面)的路由。如果我們使用的是路由包，則頁面支持的路由始終是可深度鏈接的，而無頁面的路由則不是。

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

深度鏈接 Deep linking

Flutter支持iOS、Android和web瀏覽器上的深度鏈接。打開URL會在應用程序中顯示該屏幕。通過以下步驟，我們可以使用命名路由（使用routes參數(shù)或onGenerateRoute）或使用Router小部件啟動和顯示路由。

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

在 Android 上啟用 深度鏈接 Deep linking

只需要在AndroidManifest.xml配置文件中的<activity>標簽中添加一個元數(shù)據(jù)標簽和意向過濾器標簽即可：

<!-- 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，用于將我們的應用程序與其他使用相同方案的應用程序進行區(qū)分。

配置完成后，同樣需要進行應用的重啟。

在web上配置URL策略

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

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

配置起來也很簡單，從flutter_web_plugins插件庫導入usePathUrlStrategy方法，在入口函數(shù)中調用即可。

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

PathUrlStrategy使用歷史API，這需要對web服務器進行額外配置，具體怎么配置，應該跟nginx相關～

最后

熟悉了導航和路由，再加深一下對組件里的理解記憶，后面熟悉一下接口請求的方式，基本上就可以開始做flutter應用的開發(fā)了～

以上就是flutter的導航和路由使用示例詳解的詳細內容，更多關于flutter 導航路由的資料請關注腳本之家其它相關文章！

最新評論