為什么要使用路由

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

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

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

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

Flutter路由介紹

首先說(shuō)一下，本篇的路由介紹是 Flutter 1.0的實(shí)現(xiàn)方式，F(xiàn)lutter 2.0對(duì)路由做了很大的改動(dòng)，使用了聲明式方式重構(gòu)了路由，使用起來(lái)會(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>對(duì)象，用于全局存儲(chǔ)導(dǎo)航的狀態(tài)。
• onGenerateRoute為一個(gè)路由攔截器，當(dāng)路由發(fā)生改變時(shí)，該方法會(huì)被調(diào)用，從而可以根據(jù)路由參數(shù)返回不同的頁(yè)面，或者進(jìn)行路由攔截。
• initialRoute為初始化路由路徑，一般為啟動(dòng)頁(yè)或首頁(yè)的路徑。
  

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

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

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

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

實(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頁(yè)面
    notFoundPath: (context) => NotFound(),
    //啟動(dòng)頁(yè)
    splashPath: (context) => Splash(),
    //登錄
    loginPath: (context) => LoginPage(),
    //首頁(yè)
    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)方法，是為了可以直接從過(guò)類(lèi)名訪問(wèn)屬性和方法，而無(wú)需反復(fù)構(gòu)建對(duì)象。這樣，路由訪問(wèn)的時(shí)候也可以通過(guò)類(lèi)名的靜態(tài)屬性直接訪問(wèn)，可以避免拼寫(xiě)錯(cuò)誤。有了這個(gè)類(lèi)了后，App 的所有頁(yè)面都可以通過(guò)這個(gè)類(lèi)集中管理，從而避免多處維護(hù)了。

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

接下來(lái)就是改造 main.dart 文件，在構(gòu)建 MaterialApp 時(shí)使用對(duì)應(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中我們無(wú)需再通過(guò) import引入相關(guān)的頁(yè)面 了，而是直接配置路由的配置屬性即可。

頁(yè)面路由跳轉(zhuǎn)

頁(yè)面路由跳轉(zhuǎn)更為簡(jiǎn)便，在 Flutter 中的 NavigatorState 中分別提供了 pushNamed 方法和pushReplacementNamed 方法，前者會(huì)在導(dǎo)航欄有返回按鈕，后者是使用路由后的頁(yè)面直接替換當(dāng)前頁(yè)面，適用于啟動(dòng)頁(yè)的調(diào)整。 在啟動(dòng)頁(yè)中未來(lái)停留幾秒，使用了一個(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);
    });
  }
}

普通頁(yè)面的跳轉(zhuǎn)直接使用 pushNamed 即可，若要返回上一級(jí)，則使用 pop 方法。push 和 pop方法均可以攜帶參數(shù)，下一篇我們?cè)賮?lái)介紹如何處理路由參數(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)行效果如下圖所示。

以上就是Flutter app頁(yè)面路由以及路由攔截的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Flutter 路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論