Flutter app頁面路由以及路由攔截的示例分析

這篇文章主要介紹了Flutter app頁面路由以及路由攔截的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為什么要使用路由

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Flutter app頁面路由以及路由攔截的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!