Flutter 路由

前言：

路由的核心就是一个路由映射表，比如login  映射到 LoginPage,有了这样的映射，就可以根据名字去找寻对应的页面。

在Flutter 中，路由管理主要有两个类 Route 和 Navigator

一 Route

在Flutter 中，一个页面要想被理由统一管理，必须要包装为一个Route,

但是Route 本身是一个抽象类,所以是不能被实例化的

abstract class Route<T>

所以我们一般使用MaterialPageRoute，这个MaterialPageRoute也不是直接继承自Route的，

它是继承链条  PageRoute -> ModalRoute -> TransitionRoute - >OverlayRoute - > Route

对于安卓平台 ，打开一个页面是直接从底部滑动到顶部

对于苹果平台, 打开一个页面会从屏幕右侧滑动到屏幕的左侧

二 Navigator

1 基本使用

管理所有Route 的 widget，通过一个路由栈管理，也就是先进后出的结构。

  _jumpToDetail(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return DetailPage();
      },
    ));
  }

上面的方式有缺点 ，假如我们应用中存在多个地方都要访问商品详情页面，这样写的话，代码就会重复太多了。

这种时候就可以使用 

2 命名路由

以上的方式就是一个简单的跳转，但是一般的话 我们会通过在MaterialApp 里面配置route 的方式构建路由映射表

Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{},

这个routes 参数就是一个Map

例如如下的方式

routes: {"/detail": (context) => DetailPage()},

那么调用的时候直接可以push 就行了

_jumpToDetail(BuildContext context) {

Navigator.of(context).pushNamed("/detail");

}

 3 传递参数

使用一个钩子函数实现传递参数 onGenerateRoute ，settings.arguments

这个函数的调用时机：

onGenerateRoute 只有没在routes中注册的路由才会被回调。

所以我们可以在这里做一些操作

 onGenerateRoute: (settings) {
        if (settings.name == "/about") {
          // 这里
          return MaterialPageRoute(
            builder: (context) {
              return AboutPage(message: settings.arguments);
            },
          );
        }
        return null;
      },

为什么采用这种方式，因为在AboutPage 中定义的有参数，那么在routes定义的时候，没有办法传入初始化的参数，所以采用这种方式。

4 举例来说一个项目中的router.dart 文件

import 'package:flutter/material.dart';
import '../pages/tabs/tab.dart';

import '../pages/tabs/home.dart';
import '../pages/tabs/category.dart';
import '../pages/tabs/user.dart';
import '../pages/tabs/cart.dart';
import '../pages/productList.dart';
import '../pages/productSearch.dart';
import '../pages/productDetail.dart';
import '../pages/login.dart';
import '../pages/login/registerFirst.dart';
import '../pages/ensureOrder/ensuerOrder.dart';
import '../pages/address/addressAdd.dart';
import '../pages/address/addressEdit.dart';
import '../pages/address/addressList.dart';
import '../pages/ensureOrder/choosePay.dart';

//配置路由
final routes = {
  '/': (context) => Tabs(),
  '/home': (context) => HomePage(),
  '/category': (context) => CategoryPage(),
  '/user': (context) => UserPage(),
  '/cart': (context) => CartPage(),
  '/productSearch': (context) => ProductSearchPage(),
  '/productDetail': (context) => ProductDetailPage(),
  '/login': (context) => LoginPage(),
  '/ensureOrder': (context) => EnsureOrderpage(),
  '/registerFirst': (context) => RegisterFirstPage(),
  '/addressAdd': (context) => AddressAddPage(),
  '/addressEdit': (context) => AddressEditPage(),
  '/addressList': (context) => AddressListPage(),
  '/choosePay': (context) => ChoosePayPage(),
  '/productList': (context, {arguments}) =>
      ProductListPage(arguments: arguments)
};

//固定写法
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
  final String? name = settings.name;
  final Function pageContentBuilder = routes[name] as Function;
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
// 有参数的形式
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
// 无参数的形式
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

在main中直接使用即可：

initialRoute: "/",

onGenerateRoute: onGenerateRoute,

5 onUnknownRoute

这个方法如名字一样 ,跳转的路由未找到就会走这个方法

onUnknownRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) {
            return UnkonwnPage();
          },
        );
      },