Flutter路由框架Fluro使用教程详细讲解

目录
  • 1.Navigator使用简介
  • 2.fluro
    • 1.配置
    • 2.使用方法
    • 3.路由拦截
  • 3.封装

1.Navigator使用简介

使用Flutter 的Navigator 导航器可以实现页面的跳转,Navigator的使用方法简单介绍一下:

页面跳转:

	Navigator.push<void>(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => const MyHomePage(),
      ),
    );

页面跳转的同时关闭当前页面(页面替换):

	Navigator.pushReplacement<void, void>(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => const MyHomePage(),
      ),
    );

页面跳转的同时关闭到之前的某一个页面:

	Navigator.pushAndRemoveUntil<void>(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => const MyHomePage(),
      ),
      (route) => false // ModalRoute.withName('/')
    );

也可以直接使用路由名称进行上面操作,例如跳转:Navigator.pushNamed(context, '/home');路由名称需要提前在MaterialApp中定义好。

	MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      routes: {
        "/page1": (context) => PageA(),
        "/page2": (context) => PageB(),
      },
    );

接收参数:var args = ModalRoute.of(context).settings.arguments;

页面返回

Navigator.pop(context);

接收页面的返回值:

	Navigator.push<void>(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => const MyHomePage(),
      ),
    ).then((dynamic result) {
      // 页面返回result
    });

必须同时配合Navigator.pop<dynamic>(context, result);

还有路由删除removeRoute,路由替换replace等。

2.fluro

直接使用Navigator的主要问题是不易维护。如果某个页面的传参发生了变化,那么所有跳转处都需要做修改。

所以我们可以使用现有封装好的路由框架来替我们解决这些问题。比如fluro。

1.配置

添加依赖至pubspec.yaml

dependencies:
	fluro: ^2.0.3

定义唯一一个FluroRouter对象:

static final FluroRouter router = FluroRouter();

剩下的就是添加路由处理器Handler,下面代码举例添加了两个页面:

class Routes {
  static String home = '/home';
  static String webViewPage = '/webView';
  static final List<IRouterProvider> _listRouter = [];
  static final FluroRouter router = FluroRouter();
  static void initRoutes() {
    /// 指定路由跳转错误返回页
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
        debugPrint('未找到目标页');
        return const NotFoundPage();
      });
    router.define(home, handler: Handler(
      handlerFunc: (BuildContext? context, Map<String, List<String>> params) => const Home()));
    // Routes.router.navigateTo(context, '${Routes.webViewPage}?title=标题&url=地址');
    router.define(webViewPage, handler: Handler(handlerFunc: (_, params) {
      /// 接收参数
      final String title = params['title']?.first ?? '';
      final String url = params['url']?.first ?? '';
      return WebViewPage(title: title, url: url);
    }));
  }
}

配置fluro:

	MaterialApp(
      onGenerateRoute: Routes.router.generator,
    );

初始化:

class MyApp extends StatelessWidget {
  MyApp() {
    Routes.initRoutes();
  }
  ...
}

2.使用方法

核心就一个方法navigateTo,源码如下:

  Future navigateTo(BuildContext context, String path,
      {bool replace = false,
      bool clearStack = false,
      bool maintainState = true,
      bool rootNavigator = false,
      TransitionType? transition,
      Duration? transitionDuration,
      RouteTransitionsBuilder? transitionBuilder,
      RouteSettings? routeSettings}) {
    RouteMatch routeMatch = matchRoute(context, path,
        transitionType: transition,
        transitionsBuilder: transitionBuilder,
        transitionDuration: transitionDuration,
        maintainState: maintainState,
        routeSettings: routeSettings);
    Route<dynamic>? route = routeMatch.route;
    Completer completer = Completer();
    Future future = completer.future;
    if (routeMatch.matchType == RouteMatchType.nonVisual) {
      completer.complete("Non visual route type.");
    } else {
      ///找不到时走`notFoundHandler`
      if (route == null && notFoundHandler != null) {
        route = _notFoundRoute(context, path, maintainState: maintainState);
      }
      if (route != null) {
        final navigator = Navigator.of(context, rootNavigator: rootNavigator);
        if (clearStack) {
          future = navigator.pushAndRemoveUntil(route, (check) => false);
        } else {
          future = replace
              ? navigator.pushReplacement(route)
              : navigator.push(route);
        }
        completer.complete();
      } else {
        final error = "No registered route was found to handle '$path'.";
        print(error);
        completer.completeError(RouteNotFoundException(error, path));
      }
    }
    return future;
  }
  • path:路由名称。
  • replace:等同于pushReplacement
  • clearStack:等同于pushAndRemoveUntil
  • transition:页面跳转动画,默认native,平台默认动画。
  • transitionDuration:动画时长。
  • transitionBuilder:自定义动画。
  • routeSettings:用于传递数据。可使用context.settings.arguments获取。

具体的使用见项目routers目录。

3.路由拦截

路由拦截可以实现权限控制。比如用户没有登录,当进入某些需要登录后才能显示的页面时,可以拦截跳转进行判断,引导用户进入登录页。

MaterialApp有 onGenerateRoute方法可以在跳转时进行路由拦截。但是使用的fluro将这一属性占用了,所以我们可以继承 FluroRouter 类,重写navigateTo方法实现。

class MyFluroRouter extends FluroRouter {
  List<String> _loginList;
  set loginList(value) => _loginList = value;
  @override
  Future navigateTo(
    BuildContext context,
    String path, {
    bool replace = false,
    bool clearStack = false,
    bool maintainState = true,
    bool rootNavigator = false,
    TransitionType transition,
    Duration transitionDuration,
    transitionBuilder,
    RouteSettings routeSettings,
  }) {
    String pathToNavigate = path;
    AppRouteMatch routeMatched = this.match(path);
    String routePathMatched = routeMatched?.route?.route;
    if (routePathMatched != null) {
      //如果页面需要登录,修改路由路径到登录页面
      if (_loginList != null && !_loginList.contains(routePathMatched)) {
        pathToNavigate = '/login‘;
      }
    }
    return super.navigateTo(context, pathToNavigate,
        replace: replace,
        clearStack: clearStack,
        maintainState: maintainState,
        rootNavigator: rootNavigator,
        transition: transition,
        transitionDuration: transitionDuration,
        transitionBuilder: transitionBuilder,
        routeSettings: routeSettings);
  }
}

3.封装

fluro工具类:

class NavigatorUtils {
  static void push(BuildContext context, String path,
      {bool replace = false, bool clearStack = false, Object? arguments}) {
    unfocus();
    Routes.router.navigateTo(context, path,
      replace: replace,
      clearStack: clearStack,
      transition: TransitionType.native,
      routeSettings: RouteSettings(
        arguments: arguments,
      ),
    );
  }
  static void pushResult(BuildContext context, String path, Function(Object) function,
      {bool replace = false, bool clearStack = false, Object? arguments}) {
    unfocus();
    Routes.router.navigateTo(context, path,
      replace: replace,
      clearStack: clearStack,
      transition: TransitionType.native,
      routeSettings: RouteSettings(
        arguments: arguments,
      ),
    ).then((Object? result) {
      // 页面返回result为null
      if (result == null) {
        return;
      }
      function(result);
    }).catchError((dynamic error) {
      debugPrint('$error');
    });
  }
  /// 返回
  static void goBack(BuildContext context) {
    unfocus();
    Navigator.pop(context);
  }
  /// 带参数返回
  static void goBackWithParams(BuildContext context, Object result) {
    unfocus();
    Navigator.pop<Object>(context, result);
  }
  static void unfocus() {
    FocusManager.instance.primaryFocus?.unfocus();
  }
}

模块管理:

import 'package:fluro/fluro.dart';
abstract class IRouterProvider {
  void initRouter(FluroRouter router);
}

实现接口:

class LoginRouter implements IRouterProvider{
  static String loginPage = '/login';
  static String registerPage = '/login/register';
  @override
  void initRouter(FluroRouter router) {
    router.define(loginPage, handler: Handler(handlerFunc: (_, __) => const LoginPage()));
    router.define(registerPage, handler: Handler(handlerFunc: (_, __) => const RegisterPage()));
  }
}

各模块初始化,放在Routes的initRoutes中:

    /// 各自路由由各自模块管理,统一在此添加初始化
    _listRouter.add(LoginRouter());
  	...
    /// 初始化路由
    void initRouter(IRouterProvider routerProvider) {
      routerProvider.initRouter(router);
    }
    _listRouter.forEach(initRouter);

目前Flutter团队有维护一款路由框架go_router(支持Navigator 2.0),但目前有部分功能缺失,比如不支持接收页面的返回值,没有pushAndRemoveUntil方法。

期待后面功能的完善。但就目前来说,对于Android 和iOS平台开发来说fluro的功能足够使用了。

到此这篇关于Flutter路由框架Fluro使用教程详细讲解的文章就介绍到这了,更多相关Flutter Fluro内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter 路由插件fluro的使用

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: //www.jb51.net/article/215167.htm //www.jb51.net/article/214856.htm 使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造.在 pub 上,有优秀的路由插件 fluro 解决这类问题. fluro的使用方

  • Flutter 使用fluro的转场动画进行页面切换

    在 fluro 中,定义路由处理器 Handler 时可以指定该页面的默认转场形式,或者在使用 navigateTo 方法是可以设置页面跳转transition参数来设定个性化的转场形式.本篇演示了fluro 内置的转场动画,效果如下图所示. 转场形式 fluro 的转场形式通过 TransitionType枚举定义,如下所示: enum TransitionType { native, //原生形式,和原生的保持一致,默认 nativeModal, //原生模态跳转 inFromLeft, /

  • Flutter路由框架Fluro使用简介

    在Flutter应用开发过程中,除了使用Flutter官方提供的路由外,还可以使用一些第三方路由框架来实现页面管理和导航,如Fluro.Frouter等. Fluro作为一款优秀的Flutter企业级路由框架,Fluro的使用比官方提供的路由框架要复杂一些,但是却非常适合中大型项目.因为它具有层次分明.条理化.方便扩展和便于整体管理路由等优点. 使用Fluro之前需要先在pubspec.yaml文件中添加Fluro依赖,如下所示. dependencies: fluro: "^1.5.1&quo

  • Flutter路由fluro引入配置和使用的具体方法

    目录 flutter_fluro简介 引入fluro 初始化Fluro 编写rotuer_handler 配置路由 把Fluro的Router静态化 把路由注册/注入到顶层 在首页使用 总结: Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter_fluro简介 fluro简化了Flutter的路由开发,也是目前Flutter生态中最成熟的路由框架.

  • Flutter路由管理插件fluro使用简介

    前面两篇文章我们介绍了Flutter 的原生导航器 Navigator 实现页面跳转,路由及路由拦截的使用,具体可以参考之前的文章: Flutter页面路由及404路由拦截实现 Flutter实现路由参数传递及解析 使用原生的路由基本上能够满足大部分需求,但如果想要对页面做类似浏览器 url 那样的路由,或者控制页面跳转的转场动画,那么原生的路由需要做不少的改造.在 pub上,有优秀的路由插件 fluro解决这类问题. fluro的使用方法 fluro 的使用步骤比较简单,分为下面三个步骤: 构

  • Flutter路由之fluro的配置及跳转

    目录 1.pubspec.yaml导包,注意格式~ 2.新建路由类,改类是定义页面的路径,然后将页面handler和路径设置到路由中 3.新建router_handler.dart,处理参数和跳转页面 4.调用传参 5.接收数据 6.问题来了,因为fluro无法直接传中文的,这里就需要用到编码码解码了,也就是encode和decode 1.pubspec.yaml导包,注意格式~ dependencies: flutter: sdk: flutter fluro: ^1.6.3 2.新建路由类,

  • Flutter路由框架Fluro使用教程详细讲解

    目录 1.Navigator使用简介 2.fluro 1.配置 2.使用方法 3.路由拦截 3.封装 1.Navigator使用简介 使用Flutter 的Navigator 导航器可以实现页面的跳转,Navigator的使用方法简单介绍一下: 页面跳转: Navigator.push<void>( context, MaterialPageRoute( builder: (BuildContext context) => const MyHomePage(), ), ); 页面跳转的同

  • Xcode使用教程详细讲解(全)

    Xcode使用教程详细讲解是本文要介绍的内容,Xcode是一个款强大的IDE开发环境,就像你在写Windows程序时需要VS2005一样 需要要Xcode为你写Mac程序提供环境.因此,如果你要成为Mac 程序的开发者,灵活运用Xcode工具是你必须做的第一步. 1)我们写程序时常常在源文件的头部添加copyright声明以及公司名称等等:而Xcode在创建文件时已经帮我们做了绝大部分工作,我们可能需要修改一下公司名称,因为xcode给不知道我们公司名称,它不可能预知一切,所以需要我们自己通过设

  • Scrapy爬虫框架集成selenium及全面详细讲解

    目录 一.架构介绍 二.安装创建和启动 三.配置文件目录介绍 四.爬取数据,并解析 五.数据持久化 保存到文件 保存到redis 保存到MongoDB 保存到mysql 六.动作链,控制滑动的验证码 七.提高爬取效率 八.fake-useragent池 九.中间件配置 process_exception 错误处理 process_request 加代理,加cookie等 十.集成selenium 十一.指纹和布隆过滤器实现增量爬取 网址指纹 布隆过滤器 十二.分布式爬虫 十三.爬虫框架全站爬取使

  • Pytest框架之fixture的详细使用教程

    前言 前面一篇讲了setup.teardown可以实现在执行用例前或结束后加入一些操作,但这种都是针对整个脚本全局生效的 如果有以下场景:用例 1 需要先登录,用例 2 不需要登录,用例 3 需要先登录.很显然无法用 setup 和 teardown 来实现了fixture可以让我们自定义测试用例的前置条件 fixture优势 命名方式灵活,不局限于 setup 和teardown 这几个命名 conftest.py 配置里可以实现数据共享,不需要 import 就能自动找到fixture sc

  • Vue路由vue-router详细讲解指南

    中文文档:https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转: 首先我们来学习三个单词(route,routes,router): route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由: routes:它是个复数,表示多个的集合才能为复数:即我们可以理解为

随机推荐