Flutter實現(xiàn)頁面路由及404路由攔截

更新時間：2021年11月29日 09:15:03 作者：島上碼農(nóng)

這篇文章介紹了Flutter實現(xiàn)頁面路由及404路由攔截的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

為什么要使用路由

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

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

在開發(fā)過程中，隨著頁面的增加，如果繼續(xù)使用這種方式會有如下缺陷：

代碼耦合嚴重：涉及到頁面跳轉(zhuǎn)的地方就需要插入頁面的構(gòu)造函數(shù)，意味著需要知道其他頁面的構(gòu)建方式。
不易維護：一旦某個頁面發(fā)生了變化，需要將涉及到該頁面的跳轉(zhuǎn)全部改變。
權限控制不方便：假設某些頁面需要授權后才可以訪問，需要在各個地方插入權限判斷。

Flutter路由介紹

首先說一下，本篇的路由介紹是 Flutter 1.0的實現(xiàn)方式，F(xiàn)lutter 2.0對路由做了很大的改動，使用了聲明式方式重構(gòu)了路由，使用起來會更為復雜。在 Flutter 的 MaterialApp提供了路由配置參數(shù)，當使用路由配置后，MaterialApp 的構(gòu)造形式如下所示：

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

navigatorKey是一個GlobalKey<NavigatorState>對象，用于全局存儲導航的狀態(tài)。
onGenerateRoute為一個路由攔截器，當路由發(fā)生改變時，該方法會被調(diào)用，從而可以根據(jù)路由參數(shù)返回不同的頁面，或者進行路由攔截。
initialRoute為初始化路由路徑，一般為啟動頁或首頁的路徑。

頁面結(jié)構(gòu)與邏輯

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

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

這里的路由跳轉(zhuǎn)分為了兩種，一是從啟動頁跳轉(zhuǎn)到首頁，這種跳轉(zhuǎn)不可返回的；二是正常的調(diào)整，可以點擊返回按鈕返回到上一級。在 Flutter 中提供不同的方法應對這兩種情況。

實現(xiàn)關鍵代碼

首先是路由表和路由攔截響應的實現(xiàn)，在 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;
      },
    );
  }
}

這里全部使用了靜態(tài)屬性和靜態(tài)方法，是為了可以直接從過類名訪問屬性和方法，而無需反復構(gòu)建對象。這樣，路由訪問的時候也可以通過類名的靜態(tài)屬性直接訪問，可以避免拼寫錯誤。有了這個類了后，App 的所有頁面都可以通過這個類集中管理，從而避免多處維護了。

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

接下來就是改造 main.dart 文件，在構(gòu)建 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,
    );
  }
}

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

頁面路由跳轉(zhuǎn)

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

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

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

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),
    ],
  ),
),

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

路由及攔截.gif