Flutter 封装fluro路由框架,提供路由,实现父子页面信息互传等功能

参考这篇,讲的也比较不错 =====Flutter入门之（fluro路由跳转框架)

要实现的功能

1. push -> 可以不传递/传递 params 到next 页面(路由)
2. pop -> 可以直接pop / 可以pop时携带params 返回上一级页面(路由)
3. replace -> 干掉当前路由
4. reset -> 重置路由
5. clearStack fluro提供的清空当前路由栈的参数选项
6. 最好是用一个导航管理类的静态方法来调用, 使用方便

需要知道的

首先, fluro也是基于Flutter自己的导航模块封装的, 一切的基准还是基于Future , 类似于RN的Promise, 所以,我们可以把 push的行为理解成一个异步函数,

比如这样使用

 change(BuildContext context) async {
   
    print('welcomt ======= + ');
    var res = await NavigationUtils.push(context, AppRouterList.test1, transition: TransitionType.fadeIn, params: {
   "we":"lff","you":"wll"});
    print('welcomt ======= + ' + res.toString());
  }

1. 启动push, 执行异步函数(此时就算进入了异步函数, 如果你使用async/await, 那么就处于 一直在 await的过程中)
2. 当下一级页面pop执行, 此时的才会给这一次的push行为给出一个明确Future完成态结果, 此时上一级页面发起的 await 函数 才能继续走下去,
3. 有人会问, 那我push 执行了, 就一直在await, 那不是卡住了后面函数的执行了吗?比如上面的使用代码, 第二个打印就要一直等,等到下一个页面pop了, 才会执行.
4. 我的理解是, 是的会卡住, 但是这本来也是合理的,当你执行一个push动作以后, 一定是离开当前页面,而且当前页面也不该再执行任何操作, 而且await能确保Flutter在push到下一个页面的时候, 不会因为其他什么耗时操作而影响到push的UI动作, 也保证转场动画页面切换的流程性(个人理解,有问题请多指教)

封装Fluro

基本上, 网上有很多封装的思路, 我也是初学,然后借鉴别人的, 按照自己习惯进行了部分修改

需要的几个类

1.AppRouter => 这个是一个全局的路由对象类, 用来设置Fluro的配置,以及AppRouterList 路由列表的注册导入
2.AppRouterList => 用来记录各个路由path, 以及提供以路由注册的方法来配置各个路由
3.NavigationUtils => 这个就是导航工具类, 一般配置好以后, 我们就主要使用该类, 来进行静态函数调用, push/pop/replace 等

直接上代码

代码里注释还算详细…吧

AppRouter.dart

import 'package:ebankhome/page/common/PageNotFound.dart';
import 'package:ebankhome/router/AppRouterList.dart';

/// -------------------------------
/// Created with Flutter Dart File.
/// User tianNanYiHao@163.com
/// Date: 2020-08-07
/// Time: 13:24
/// Des: 路由类
/// -------------------------------

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

/// [AppRouter] 路由类
/// 提供路由注册/拦截/404等功能
class AppRouter {
   

  /// 全局路由对象
  static Router router;

  /// 初始化路由类基本信息
  static void configureRoutes() {
   
    Router router = Router();

    /// 指定路由错误的跳转页面
    router.notFoundHandler = Handler(handlerFunc:
        (BuildContext context, Map<String, List<String>> parameters) {
   
      debugPrint('---------paeg 404 ------------');
      return PageNotFound();
    });

    /// 路由批量导入
    AppRouterList().initRouter(router);
    AppRouter.router = router;
  }
}

AppRouterList.dart

import 'package:ebankhome/page/common/BottomNavigationPage.dart';
import 'package:ebankhome/page/common/Test1.dart';
import 'package:ebankhome/page/common/Test2.dart';
import 'package:ebankhome/page/common/Test3.dart';
import 'package:ebankhome/page/common/Welcome.dart';
import 'package:ebankhome/page/cunstomer/Customer.dart';
import 'package:ebankhome/page/home/Home.dart';
import 'package:ebankhome/page/login/LogIn.dart';
import 'package:ebankhome/page/login/Register.dart';
import 'package:ebankhome/page/my/My.dart';

/// -------------------------------
/// Created with Flutter Dart File.
/// User tianNanYiHao@163.com
/// Date: 2020-08-07
/// Time: 13:36
/// Des: 路由列表类, 新增的路由在此添加
/// -------------------------------

import 'package:fluro/fluro.dart';

/// [AppRouterList] 路由列表类
class AppRouterList {
   
  static String pagenNotFound = 'pagenNotFound'; //未找到 404

  static String welcome = 'welcome';
  static String BottomNavgationPage = 'BottomNavgationPage'; // 基础页

  static String login = 'login';
  static String register = 'register';
  static String home = 'home';
  static String customer = 'customer';
  static String my