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

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

為什么要使用路由

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

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

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

• 代碼耦合嚴(yán)重：涉及到頁面跳轉(zhuǎn)的地方就需要插入頁面的構(gòu)造函數(shù)，意味著需要知道其他頁面的構(gòu)建方式。

• 不易維護(hù)：一旦某個(gè)頁面發(fā)生了變化，需要將涉及到該頁面的跳轉(zhuǎn)全部改變。

• 權(quán)限控制不方便：假設(shè)某些頁面需要授權(quán)后才可以訪問，需要在各個(gè)地方插入權(quán)限判斷。
  

Flutter路由介紹

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

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

• navigatorKey是一個(gè)GlobalKey<NavigatorState>對象，用于全局存儲(chǔ)導(dǎo)航的狀態(tài)。

• onGenerateRoute為一個(gè)路由攔截器，當(dāng)路由發(fā)生改變時(shí)，該方法會(huì)被調(diào)用，從而可以根據(jù)路由參數(shù)返回不同的頁面，或者進(jìn)行路由攔截。

• initialRoute為初始化路由路徑，一般為啟動(dòng)頁或首頁的路徑。
  

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

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

• AppHomePage ：首頁，與之前的章節(jié)的頁面框架一樣，路由路徑為“/”；

• Splash：啟動(dòng)頁，只有一個(gè)圖片，實(shí)際使用過程可以用于加載引導(dǎo)頁，廣告或其他用途。頁面停留2秒后切換到首頁。

• LoginPage：登錄頁，用于演示點(diǎn)擊登錄按鈕通過路由切換到登錄頁。

• NotFound：即404頁面，當(dāng)路由表中沒有匹配的路徑時(shí)，跳轉(zhuǎn)到404頁面。
  

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

實(shí)現(xiàn)關(guān)鍵代碼

首先是路由表和路由攔截響應(yīng)的實(shí)現(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(),
    //啟動(dòng)頁
    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)方法，是為了可以直接從過類名訪問屬性和方法，而無需反復(fù)構(gòu)建對象。這樣，路由訪問的時(shí)候也可以通過類名的靜態(tài)屬性直接訪問，可以避免拼寫錯(cuò)誤。有了這個(gè)類了后，App 的所有頁面都可以通過這個(gè)類集中管理，從而避免多處維護(hù)了。

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

接下來就是改造 main.dart 文件，在構(gòu)建 MaterialApp 時(shí)使用對應(yīng)的理由配置：

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,
    );
  }
}

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

頁面路由跳轉(zhuǎn)

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

@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ù)。這里我們特意加了一個(gè)錯(cuò)誤的路由演示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),
    ],
  ),
),

最終運(yùn)行效果如下圖所示。

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