flutter導(dǎo)航框架fluro https://github.com/lukepighetti/fluro

前一章節(jié)介紹了Navigator的導(dǎo)航跳轉(zhuǎn)，今天我們來(lái)看看fluro框架提供的跳轉(zhuǎn)。flutter提供的Navigator和fluro這兩個(gè)到底哪個(gè)好用，個(gè)人推薦使用fluro。廢話不多說，一個(gè)字干。

1、在pubspec.yaml中添加引用
fluro: ^1.7.8
執(zhí)行一下
flutter pub get
2、基礎(chǔ)配置

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("頁(yè)面沒有注冊(cè)，找不到該頁(yè)面  ");
          return RouteNotFound();
        }
      );

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

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

}

3、定義模塊路由注冊(cè)

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、統(tǒng)一跳轉(zhuǎn)配置

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("傳遞的參數(shù)  $paramStr");
    return "$registerPath?$paramStr";
  }
}

路由跳轉(zhuǎn)

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

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

path就像http中g(shù)et請(qǐng)求的url鏈接，"?"號(hào)前的是fluroRouter.define()中的routePath字段，后面的就是我們要傳遞的參數(shù)。

參數(shù)獲取

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

這樣傳遞的參數(shù)只能是字符串格式，如果字符串中包含中文就需要使用Uri.encodeComponent進(jìn)行轉(zhuǎn)義

其他類型參數(shù)傳遞

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

其他的類型參數(shù)直接在routeSettings中設(shè)置，其他的都是一樣

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