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 <String, WidgetBuilder> _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 <String, WidgetBuilder> _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 <String, WidgetBuilder> mapForHome(){
return {
"/": (BuildContext context) => FMHomeVC(),
};
}
// MaterialComponents 表
Map <String, WidgetBuilder> 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 <String, WidgetBuilder> _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 <String, WidgetBuilder> mapForHome(){
return {
"/": (BuildContext context) => FMHomeVC(),
};
}
// MaterialComponents 表
Map <String, WidgetBuilder> mapForMaterialComponents(){
return {
"/MaterialComponents/AppBar": (BuildContext context) => FMAppBarVC(),
};
}
}
5. 技术小结
封装其实只是一个思路,没有最好或者最差,思想很明确,让复杂的代码简单化,使杂乱的代码序列化。经过这样处理,我们将路由放在了一个单独的管理类进行管理和操作。同理,如果业务特别复杂,我们依旧可以对不同业务单独创建文件来做路由表,然后使用总表对所有路由表进行汇总。
总之,没有最好的,只有最适合的。