Flutter入门（21）：Flutter 组件之路由表封装思路详解

1. 基本介绍

这里本应该继续更新组件详解的，但是无奈 flutter 组件太多，导致讲解的工程显得非常累赘。作为一个老码农了，有一点代码洁癖，这一点肯定是不能容忍的。这里对路由表进行封装，这里不一定是最好的封装方式，只是按着我自己的代码习惯来进行了一个整理。后续如果有好的封装方式，会再次更新。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 为什么要进行封装？

• 文件过多，手动跳转代码太复杂

我这里最开始创建工程时并没有使用路由，使用 if else 对点击事件进行拦截，手动跳转到各个页面。刚开始页面较少，其实没有太大影响，也很直观方便。随着工程文件越来越多，if else 越来越多，这样的代码质量就肯定会被拉低。

• main.dart 文件引用以及逻辑代码不清晰

main.dart 文件作为代码入口，逻辑不清晰，代码冗余没有封装，是一件很没有排面的事情，有着代码洁癖的同学肯定也是不能容忍。如果把路由表不做封装，直接放在 main.dart 里，轻则几百行，多则上千行的引用，看着肯定非常难受。

• 不易管理

假设我们在 main.dart 里手动添加了路由，以后每次创建新的页面，都需要来创建和引用。维护起来是一件非常头疼的事情，并且容易遗漏。

4. 封装思路

4.1 文件管理

首先我们先独立出来一个文件，创建相关的管理类。创建数据源，为自定义路由，以及未知路由提供 MaterialPageRoute，这样 main.dart 只需要调用管理类的方法，为拦截路由以及未知路由提供数据。

import 'package:flutter/material.dart';
import 'package:FMStudyApp/FMRouteManager.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    FMRouteManager manager = FMRouteManager();
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      onGenerateRoute: (setting){
        return manager.routeWithSetting(setting);
      },
      onUnknownRoute: (setting){
        return manager.unknowRouteWithSetting(setting);
      },
    );
  }
}

import 'package:FMStudyApp/home/home.dart';
import 'package:flutter/material.dart';

class FMRouteManager {
  // 路由总表
  Map  _routeMap = {};

  // 自定义路由
  MaterialPageRoute routeWithSetting(RouteSettings setting){
    WidgetBuilder builder = _routeMap[setting.name];
    if(builder != null) {
      return MaterialPageRoute(builder: builder);
    }
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 未知路由
  MaterialPageRoute unknowRouteWithSetting(RouteSettings setting){
    return MaterialPageRoute(builder: (context) => Scaffold());
  }
}

4.2 数据源管理

有了独立的文件以及路由总表后，我们需要做的仅仅是按照业务分类，独立创建对应路由。我们按照不同页面创建不同的子路由表，然后总表对子路由表进行汇总，这样就可以把不同业务拆分开。易于管理，易于维护，易于查找。

import 'package:FMStudyApp/Widgets/Material_components/appbar.dart';
import 'package:FMStudyApp/home/home.dart';
import 'package:flutter/material.dart';

class FMRouteManager {
  // 路由总表
  Map  _routeMap = {};

  FMRouteManager(){
    _routeMap.addAll(mapForHome());
    _routeMap.addAll(mapForMaterialComponents());
  }

  // 自定义路由
  MaterialPageRoute routeWithSetting(RouteSettings setting){
    WidgetBuilder builder = _routeMap[setting.name];
    if(builder != null) {
      return MaterialPageRoute(builder: builder);
    }
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 未知路由
  MaterialPageRoute unknowRouteWithSetting(RouteSettings setting){
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 首页表
  Map  mapForHome(){
    return {
      "/": (BuildContext context) => FMHomeVC(),
    };
  }

  // MaterialComponents 表
  Map  mapForMaterialComponents(){
    return {
      "/MaterialComponents/AppBar": (BuildContext context) => FMAppBarVC(),
    };
  }
}

4.3 拦截路由处理

我们这里对拦截路由可以进行处理，例如判断用户未登录，或者其他情况，我们统一处理。

import 'package:FMStudyApp/Widgets/Material_components/appbar.dart';
import 'package:FMStudyApp/home/home.dart';
import 'package:flutter/material.dart';

class FMRouteManager {
  // 路由总表
  Map  _routeMap = {};
  // 拦截参数，用来拦截路由表，进行不同操作
  final _isLogin = true;
  final _otherJudge = true;

  FMRouteManager(){
    _routeMap.addAll(mapForHome());
    _routeMap.addAll(mapForMaterialComponents());
    print(_routeMap);
  }

  // 自定义路由
  MaterialPageRoute routeWithSetting(RouteSettings setting){
    // 拦截未登录路由
    if (!_isLogin) {
      return loginRoute(setting);
    }
    // 拦截其他情况路由
    if (!_otherJudge) {
      return ohterRoute(setting);
    }

    WidgetBuilder builder = _routeMap[setting.name];
    if(builder != null) {
      return MaterialPageRoute(builder: builder);
    }
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 未知路由
  MaterialPageRoute unknowRouteWithSetting(RouteSettings setting){
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 登录路由
  MaterialPageRoute loginRoute(RouteSettings setting){
    // 这里可以替换为自定义的 Login 页面
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 拦截其他情况路由
  MaterialPageRoute ohterRoute(RouteSettings setting){
    // 这里可以替换为自定义的 Login 页面
    return MaterialPageRoute(builder: (context) => Scaffold());
  }

  // 首页表
  Map  mapForHome(){
    return {
      "/": (BuildContext context) => FMHomeVC(),
    };
  }

  // MaterialComponents 表
  Map  mapForMaterialComponents(){
    return {
      "/MaterialComponents/AppBar": (BuildContext context) => FMAppBarVC(),
    };
  }
}

5. 技术小结

封装其实只是一个思路，没有最好或者最差，思想很明确，让复杂的代码简单化，使杂乱的代码序列化。经过这样处理，我们将路由放在了一个单独的管理类进行管理和操作。同理，如果业务特别复杂，我们依旧可以对不同业务单独创建文件来做路由表，然后使用总表对所有路由表进行汇总。
总之，没有最好的，只有最适合的。