Flutter中的路由管理介绍

Flutter的路由篇章再前面有介绍过，下面介绍下一个优雅实现路由管理的框架，共同学习下，结合一些自定义，使我们更好地管理我们的项目

首先导入框架

  # 路由框架 https://github.com/theyakka/fluro
  fluro: ^1.5.1

然后全局初始化

import 'package:fluro/fluro.dart';

class Application {
  static Router router;

}

这里整合一个路由管理的工具类

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

import 'application.dart';
import 'routers.dart';

/// fluro的路由跳转工具类
class NavigatorUtils {
  
  static push(BuildContext context, String path,
      {bool replace = false, bool clearStack = false}) {
    FocusScope.of(context).unfocus();
    Application.router.navigateTo(context, path, replace: replace, clearStack: clearStack, transition: TransitionType.native);
  }

  static pushResult(BuildContext context, String path, Function(Object) function,
      {bool replace = false, bool clearStack = false}) {
    FocusScope.of(context).unfocus();
    Application.router.navigateTo(context, path, replace: replace, clearStack: clearStack, transition: TransitionType.native).then((result){
      // 页面返回result为null
      if (result == null){
        return;
      }
      function(result);
    }).catchError((error) {
      print("$error");
    });
  }

  /// 返回
  static void goBack(BuildContext context) {
    FocusScope.of(context).unfocus();
    Navigator.pop(context);
  }

  /// 带参数返回
  static void goBackWithParams(BuildContext context, result) {
    FocusScope.of(context).unfocus();
    Navigator.pop(context, result);
  }
  
  /// 跳到WebView页
  static goWebViewPage(BuildContext context, String title, String url){
    //fluro 不支持传中文,需转换
    push(context, '${Routes.webViewPage}?title=${Uri.encodeComponent(title)}&url=${Uri.encodeComponent(url)}');
  }
}

初始化

import 'package:fluro/fluro.dart';

abstract class IRouterProvider{
  
  void initRouter(Router router);
}

下面来个使用示例

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

import 'router_init.dart';


class Routes {

  static String home = "/home";
  static String webViewPage = "/webview";

  static List _listRouter = [];

  static void configureRoutes(Router router) {
    /// 指定路由跳转错误返回页
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context, Map> params) {
        debugPrint("未找到目标页");
        return Container();
      });

    router.define(home, handler: Handler(
      handlerFunc: (BuildContext context, Map> params) => HomePage()));

    router.define(webViewPage, handler: Handler(handlerFunc: (_, params){
      String title = params['title']?.first;
      String url = params['url']?.first;
      return WebViewPage(title:title,url:url);
    }));

    _listRouter.clear();
    /// 各自路由由各自模块管理，统一在此添加初始化
    _listRouter.add(HomeRouter());
    _listRouter.add(AboutRouter());

    /// 初始化路由
    _listRouter.forEach((routerProvider){
      routerProvider.initRouter(router);
    });
  }
}

把上面你要指向的路由指向你想要的页面就行了

比如下面的

import 'package:fluro/fluro.dart';
import 'package:fluro/src/router.dart';
import 'package:flutter_jianshu/routers/router_init.dart';


class DetailRouter implements IRouterProvider{

  static String detailPage = "/detail";

  @override
  void initRouter(Router router) {
  }

}

把你想要指向的路由再写一个类，这样你的路由结构就会比较清晰，flutter这个一切皆组件理念固然是好，不过整理还是得靠开发者自己去管理了，所以这些细节处理好无疑对项目的维护有很大的好处。

欢迎交流和指正