Flutter頁面路由及404路由攔截實現

路由管理在 App 中非常重要，例如進行頁面切換時需要路由；接收推送消息打開對應頁面時需要路由；根據不同的數據狀態進行跳轉需要路由；進行權限管控需要路由；頁面出現404，500需要路由。接下來我們會花幾篇文章介紹 Flutter 的路由。

爲什麼要使用路由

在之前我們的代碼中，頁面跳轉使用的代碼如下所示：

 Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => LoginPage()),
);

在開發過程中，隨着頁面的增加，如果繼續使用這種方式會有如下缺陷：

• 代碼耦合嚴重：涉及到頁面跳轉的地方就需要插入頁面的構造函數，意味着需要知道其他頁面的構建方式。
• 不易維護：一旦某個頁面發生了變化，需要將涉及到該頁面的跳轉全部改變。
• 權限控制不方便：假設某些頁面需要授權後纔可以訪問，需要在各個地方插入權限判斷。

Flutter路由介紹

首先說一下，本篇的路由介紹是 Flutter 1.0的實現方式，Flutter 2.0對路由做了很大的改動，使用了聲明式方式重構了路由，使用起來會更爲複雜。在 Flutter 的 MaterialApp提供了路由配置參數，當使用路由配置後，MaterialApp 的構造形式如下所示：

return MaterialApp(
  //其他參數...
  navigatorKey: //全局導航狀態Key,
  onGenerateRoute: //路由改變響應方法,
  initialRoute: //初始化路由路徑,
);

• navigatorKey是一個GlobalKey<NavigatorState>對象，用於全局存儲導航的狀態。
• onGenerateRoute爲一個路由攔截器，當路由發生改變時，該方法會被調用，從而可以根據路由參數返回不同的頁面，或者進行路由攔截。
• initialRoute爲初始化路由路徑，一般爲啓動頁或首頁的路徑。

頁面結構與邏輯

爲了演示路由的使用，我們使用了四個頁面：

• AppHomePage ：首頁，與之前的章節的頁面框架一樣，路由路徑爲“/”；
• Splash：啓動頁，只有一個圖片，實際使用過程可以用於加載引導頁，廣告或其他用途。頁面停留2秒後切換到首頁。
• LoginPage：登錄頁，用於演示點擊登錄按鈕通過路由切換到登錄頁。
• NotFound：即404頁面，當路由表中沒有匹配的路徑時，跳轉到404頁面。

這裏的路由跳轉分爲了兩種，一是從啓動頁跳轉到首頁，這種跳轉不可返回的；二是正常的調整，可以點擊返回按鈕返回到上一級。在 Flutter 中提供不同的方法應對這兩種情況。

實現關鍵代碼

首先是路由表和路由攔截響應的實現，在 routers文件夾新建 router_table.dart 文件，代碼如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../app.dart';
import '../login.dart';
import '../not_found.dart';
import '../splash.dart';

class RouterTable {
  static String splashPath = 'splash';
  static String loginPath = 'login';
  static String homePath = '/';
  static String notFoundPath = '404';

  static Map<String, WidgetBuilder> routeTables = {
    //404頁面
    notFoundPath: (context) => NotFound(),
    //啓動頁
    splashPath: (context) => Splash(),
    //登錄
    loginPath: (context) => LoginPage(),
    //首頁
    homePath: (context) => AppHomePage(),
  };

  ///路由攔截
  static Route onGenerateRoute<T extends Object>(RouteSettings settings) {
    return CupertinoPageRoute<T>(
      settings: settings,
      builder: (context) {
        String name = settings.name;
        if (routeTables[name] == null) {
          name = notFoundPath;
        }

        Widget widget = routeTables[name](context);

        return widget;
      },
    );
  }
}

這裏全部使用了靜態屬性和靜態方法，是爲了可以直接從過類名訪問屬性和方法，而無需反覆構建對象。這樣，路由訪問的時候也可以通過類名的靜態屬性直接訪問，可以避免拼寫錯誤。有了這個類了後，App 的所有頁面都可以通過這個類集中管理，從而避免多處維護了。

這裏關鍵的是onGenerateRoute方法，該方法接收了一個 RouteSettings 對象，該對象會有個 name 屬性包含路由路徑名稱，同時還有個 arguments 用於攜帶路由參數。可以通過這個屬性來與路由表的頁面進行匹配。若匹配到則返回相應的頁面；若沒有匹配到，則路由到404頁面。同時，若需要做權限控制，也可以在這裏攔截，比如定位到403頁面或直接提醒無訪問權限。

接下來就是改造 main.dart 文件，在構建 MaterialApp 時使用對應的理由配置：

import 'package:flutter/material.dart';
import 'routers/router_table.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GlobalKey navigationKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigationKey,
      onGenerateRoute: RouterTable.onGenerateRoute,
      initialRoute: RouterTable.splashPath,
    );
  }
}

這裏會發現在 main.dart中我們無需再通過 import引入相關的頁面 了，而是直接配置路由的配置屬性即可。

頁面路由跳轉

頁面路由跳轉更爲簡便，在 Flutter 中的 NavigatorState 中分別提供了 pushNamed 方法和pushReplacementNamed 方法，前者會在導航欄有返回按鈕，後者是使用路由後的頁面直接替換當前頁面，適用於啓動頁的調整。
在啓動頁中未來停留幾秒，使用了一個定時器，在2秒後再進行跳轉，實際可以用於做一些預加載資源的提示或者廣告展示。

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  if (!_initialized) {
    _initialized = true;
    Timer(const Duration(milliseconds: 2000), () {
      Navigator.of(context).pushReplacementNamed(RouterTable.homePath);
    });
  }
}

普通頁面的跳轉直接使用 pushNamed 即可，若要返回上一級，則使用 pop 方法。push 和 pop方法均可以攜帶參數，下一篇我們再來介紹如何處理路由參數。這裏我們特意加了一個錯誤的路由演示404跳轉：

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ButtonUtil.primaryTextButton('登錄', () {
        Navigator.of(context).pushNamed(RouterTable.loginPath);
      }, context),
      SizedBox(
        height: 10,
      ),
      ButtonUtil.primaryTextButton('404', () {
        Navigator.of(context).pushNamed('errorRoute');
      }, context),
    ],
  ),
),

最終運行效果如下圖所示。