導(dǎo)航和路由

Flutter提供了一個(gè)完整的用于在屏幕之間導(dǎo)航和處理深層鏈接的系統(tǒng)。沒有復(fù)雜深度鏈接的小型應(yīng)用程序可以使用Navigator，而具有特定深度鏈接和導(dǎo)航要求的應(yīng)用程序也應(yīng)該使用Router來正確處理Android和iOS應(yīng)用上的深度鏈接，并在應(yīng)用程序在web上運(yùn)行時(shí)與地址欄保持同步。

使用Navigator導(dǎo)航

Navigator導(dǎo)航組可以用正確的過渡動(dòng)畫來展示對(duì)應(yīng)的界面，當(dāng)然，和web端的路由類似，界面其實(shí)也是以棧的形式保存著。

通過路由的buildContext上下文，并且調(diào)用對(duì)應(yīng)的push()或pop()方法，我們就可以導(dǎo)航到新的界面，比如：

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

由于Navigator保存了一個(gè)Route對(duì)象的堆棧（表示歷史堆棧），所以push（）方法也使用Route對(duì)象作為參數(shù)。MaterialPageRoute對(duì)象是Route的子類，用于指定Material Design的過渡動(dòng)畫。

命名路由

對(duì)于有些具有簡(jiǎn)單導(dǎo)航和深度鏈接需求的應(yīng)用程序，我們可以使用Navigator進(jìn)行導(dǎo)航，使用MaterialApp對(duì)象的routes屬性對(duì)路由進(jìn)行配置：

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

我們?cè)谶@里配置的路由就是命名路由。

命名路由的局限

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

使用命名路由的Flutter應(yīng)用也不支持瀏覽器的前進(jìn)按鈕。基于這些原因，官方其實(shí)是不建議在大多數(shù)應(yīng)用中使用命名路由。

當(dāng)然，實(shí)際開發(fā)過程中，我們需要根據(jù)實(shí)際情況進(jìn)行調(diào)整。

使用路由Router

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

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

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

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

同時(shí)使用Router和Navigator

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

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

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

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

深度鏈接 Deep linking

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

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

在 Android 上啟用 深度鏈接 Deep linking

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

<!-- 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>

配置之后，重啟整個(gè)應(yīng)用即可。

在 ios 上啟用 深度鏈接 Deep linking

需要在ios/Runner文件夾下Info.plist文件中添加兩個(gè)新的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是一個(gè)唯一的URL，用于將我們的應(yīng)用程序與其他使用相同方案的應(yīng)用程序進(jìn)行區(qū)分。

配置完成后，同樣需要進(jìn)行應(yīng)用的重啟。

在web上配置URL策略

flutter web 應(yīng)用支持兩種URL策略：

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

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

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

PathUrlStrategy使用歷史API，這需要對(duì)web服務(wù)器進(jìn)行額外配置，具體怎么配置，應(yīng)該跟nginx相關(guān)～

最后

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

以上就是flutter的導(dǎo)航和路由使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于flutter 導(dǎo)航路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論