flutter导航fluro

flutter导航框架fluro https://github.com/lukepighetti/fluro

前一章节介绍了Navigator的导航跳转，今天我们来看看fluro框架提供的跳转。flutter提供的Navigator和fluro这两个到底哪个好用，个人推荐使用fluro。废话不多说，一个字干。

1、在pubspec.yaml中添加引用
fluro: ^1.7.8
执行一下
flutter pub get
2、基础配置

class BaseRouter{

  static FluroRouter _mFluroRouter;

  static FluroRouter getRouter(){
    return _mFluroRouter;
  }

  static void setRouter(FluroRouter router){
    _mFluroRouter = router;
  }

  static List<IRouter> _mListRouter = [];
  static void registerConfigureRoutes(FluroRouter router){
      if(router == null){
        throw Exception("fluroRouter is null, please init router");
      }

      router.notFoundHandler = Handler(
        handlerFunc:(BuildContext context, Map<String, List<String>> parameters){
          print("页面没有注册，找不到该页面  ");
          return RouteNotFound();
        }
      );

      _mListRouter.clear();
      //添加模块路由
      _mListRouter.add(LoginRouter());

      _mListRouter.forEach((element) {
        element.initFluroRouter(router);
      });
  }

}

3、定义模块路由注册

abstract class IRouter {
  void initFluroRouter(FluroRouter fluroRouter);
}

4、模块路由配置

class LoginRouter extends IRouter{


   static String loginPage = "/login/loginPage";
   static String loginUserInfoPage = "/login/loginUserInfoPage";

  @override
  void initFluroRouter(FluroRouter fluroRouter) {
    // TODO: implement initFluroRouter
    fluroRouter.define(loginPage, handler: Handler(handlerFunc: (_,params){
        String userName = params[LoginPage.bundleKeyUserName]?.first;
        String times = params[LoginPage.bundleKeyTime]?.first;
        return LoginPage(userName,times);
    }));

    fluroRouter.define(loginUserInfoPage, handler: Handler(handlerFunc: (context,params){
      final args = context.settings.arguments as UserInfo;
      return LoginInfoPage(args);
    }));
  }

}

5、统一跳转配置

class NavigatorUtils {
  static void push(BuildContext context, String path,
      {bool replace = false, bool clearStack = false}) {
    FocusScope.of(context).unfocus();
    BaseRouter.getRouter().navigateTo(context, path,
        replace: replace,
        clearStack: clearStack,
        transition: TransitionType.native);
  }

  static void pushResult(
      BuildContext context, String path, Function(Object) function,
      {bool replace = false, bool clearStack = false}) {
    FocusScope.of(context).unfocus();
    BaseRouter.getRouter()
        .navigateTo(context, path,
            replace: replace,
            clearStack: clearStack,
            transition: TransitionType.native)
        .then((value) {
      if (value == null) {
        return;
      }
      function(value);
    }).catchError((onError) {
      print("$onError");
    });
  }

  static void pushArgumentResult(BuildContext context, String path,
      Object argument, Function(Object) function,
      {bool replace = false, bool clearStack = false}) {
    BaseRouter.getRouter()
        .navigateTo(context, path,
            routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack)
        .then((value) {
      if (value == null) {
        return;
      }
      function(value);
    }).catchError((onError) {
      print("$onError");
    });
  }

  static void pushArgument(
      BuildContext context, String path, Object argument,
      {bool replace = false, bool clearStack = false}) {
    BaseRouter.getRouter().navigateTo(context, path,
        routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack);
  }

  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);
  }

  static String changeToNavigatorPath(String registerPath,
      {Map<String, Object> params}) {
    if (params == null || params.isEmpty) {
      return registerPath;
    }
    StringBuffer bufferStr = StringBuffer();
    params.forEach((key, value) {
      bufferStr
        ..write(key)
        ..write("=")
        ..write(Uri.encodeComponent(value))
        ..write("&");
    });
    String paramStr = bufferStr.toString();
    paramStr = paramStr.substring(0, paramStr.length - 1);
    print("传递的参数  $paramStr");
    return "$registerPath?$paramStr";
  }
}

路由跳转

NavigatorUtils.push(context, "/login/loginPage?userName=flutterName&email=123@qq.com");

//path的配置 /login/loginPage?userName=flutterName&email=123@qq.com

path就像http中get请求的url链接，"?"号前的是fluroRouter.define()中的routePath字段，后面的就是我们要传递的参数。

参数获取

fluroRouter.define("/login/loginPage", handler: Handler(handlerFunc: (_,params){
       String userName = params["userName"]?.first;
       String email = params["email"]?.first;
       return LoginPage(userName,email);
   }));

这样传递的参数只能是字符串格式，如果字符串中包含中文就需要使用Uri.encodeComponent进行转义

其他类型参数传递

fluroRouter.define(loginUserInfoPage, handler: Handler(handlerFunc: (context,params){
      final args = context.settings.arguments as UserInfo;
      return LoginInfoPage(args);
    }));

UserInfo userInfo = UserInfo();
    userInfo.email = "xiao@163.com";
    userInfo.name = "小小";
    NavigatorUtils.pushArgument(context, LoginRouter.loginUserInfoPage, userInfo);

static void pushArgument(
      BuildContext context, String path, Object argument,
      {bool replace = false, bool clearStack = false}) {
    BaseRouter.getRouter().navigateTo(context, path,
        routeSettings: RouteSettings(arguments: argument), replace: replace, clearStack: clearStack);
  }

其他的类型参数直接在routeSettings中设置，其他的都是一样

Demo地址： https://github.com/yangyang10/fluroDemo/tree/main/router_by_fluro