fluro介绍以及路由配置

Nealyang commented 5 years ago

前言

无论在react还是在vue中，都会有路由的配置，当然，他们一般都是单页面应用，但是对于开发而言，将路由统一管理，也无非是一个非常简洁方便的形式，甚至在不使用fluro的时候，Material也提供了onGenerateRoute 来配置路由，只不过那样会使入口页面非常的臃杂。所以这里的路由管理，我们使用 fluro

Fluro

我们在flutter package中搜索fluro，然后查看他的包详情

笔者喜欢直接转到GitHub去查看相关文档，因为里面会有example可以查看

在example中,我们可以看到他的使用规范为在lib目录下新建一个config目录，在 application.dart文件中，配置总Router，同级目录下注册route，并且注册相关handle函数。在example下，我们可以查看到url传参，包括一般字段、link以及函数的传递。

具体的文档，大家可以自行到GitHub或者flutter package中自行查看。这里我们直接看在项目中的使用

配置项目Route

项目注入新package

pubspec.yaml

dependencies:
flutter:
  sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dio: ^1.0.6
fluro: "^1.3.7"

添加 fluro 依赖。

修改文件的目录名

观察flutter官网app或者example中，官方的命名规范，文件名都是以小写字母以及下划线组成，迎合官方标准，我们将项目中，我们自己的文件，曾经的驼峰命名法全部修改为小写字母+下划线的标准

file

配置路由

这里我们在lib目录下新建一个routers目录，仿着官方example的样子，配置我们的路由

lib/routers/application.dart
```
import 'package:fluro/fluro.dart';

class Application{
static Router router;
}
```
application中我们就注册一个总的Router，方便后面给Material中onGenerateRoute注册使用。
lib/routers/router_handler.dart

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

  Handler articleDetailHandler = Handler(
      handlerFunc: (
        BuildContext context, Map<String, List<String>> params) {
          String articleId = params['id']?.first;
          String title = params['title']?.first;
          print('index>,articleDetail id is $articleId');
          return ArticleDetail(articleId, title);
        }
  );

handle就是对于路由的处理函数，这里我们先注册一个对于详情页的处理函数，handlerFunc里面的params就是我们的url的查询参数。通过 Dart 的?.运算符可以“安全”的获取其参数值。最后return 我们需要跳转的页面。

对于我们不使用fluro的情况下，跳转页面就是通过 Material 的 Navigator 跳转的，而传参呢，也就非常的代码"语义化"了,通过实例化对象而已。

  Navigator.of(context).push(new MaterialPageRoute(builder: 
      (BuildContext context) => new SidebarPage('First Page')));    //在new方法时调用控件的构造函数传入参数值

lib/routers/routes.dart

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

  class Routes {
    static String root = '/';
    static String articleDetail = "/detail";

    static void configureRoutes(Router router) {
      router.notFoundHandler = new Handler(
          handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        print("ROUTE WAS NOT FOUND !!!");
      });

      router.define(articleDetail, handler: articleDetailHandler);
    }
  }

routes页面主要是讲路由以及handle函数组合起来，也是我们页面路由配置的入口文件，如上，我们暂时，只配置了notFoundHandler以及detail的页面。

lib/pages/my_app.dart

回到我们的项目入口文件，将我们写好的路由配置注册进去。

首先引入我们需要的配置文件

  import '../routers/routes.dart';
  import '../routers/application.dart';

在构造函数中去初始化我们的Routers

    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;

最后在我们的MaterialApp中的onGenerateRoute中注入进入即可

   onGenerateRoute: Application.router.generator,

使用Router

首先，我们需要先写好我们的路由跳转目标页面，其实这个页面应该之前就写好，不然配置路由的时候怎么实例化呢是吧，莫方，现在补上也是么得问题的

lib/pages/article_detail.dart

  import 'package:flutter/material.dart';

  class ArticleDetail extends StatelessWidget {
    final String articleId;
    final String title;

    ArticleDetail(@required this.articleId, @required this.title);

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text("这篇文章的id是$articleId"),
        ),
      );
    }
  }

代码不做太多解释了，比较简单。接下来我们看下我们如何使用路由吧

跳转detail页面，当然是在点击首页list cell 的时候进行跳转，所以这里，我们需要给每一个cell添加一个点击监听

lib/wudgets/index_list_cell.dart

首先引入我们的application路由，以及dart的core包，因为涉及到url的传递，所以我们需要进行一次加密，否则会报错。

  import '../routers/application.dart';
  import 'dart:core';

由于需要加入点击监听，所以这里我们使用 InkWell widget 来包装下，关于 InkWell的更多介绍，大家可以查看相关文档:文档地址

    InkWell(
      onTap: () {
        print('跳转到详情页');
        Application.router.navigateTo(context, "/detail?id=${Uri.encodeComponent(cellInfo.detailUrl)}&title=${Uri.encodeComponent(cellInfo.title)}");
      },
      child:...
    )

对的，组合新的一行代码就是Application.router.navigateTo(context, "/detail?id=${Uri.encodeComponent(cellInfo.detailUrl)}&title=${Uri.encodeComponent(cellInfo.title)}"); 因为涉及中文以及url所以这里我们进行了Uri.encodeComponent

最终，我们即可看到我们的app已经可以跳转并且传参啦。

2detail

完整代码地址

总结

如上我们完成了页面路由的配置、跳转和传参，以及命名规范。至此，你应该学会

查找Flutter package
路由配置以及Material的路由配置
不配置路由情况的跳转和传参
官方demo命名规范（视团队规范而定）

luohong123 commented 4 years ago

非常感谢这篇路由文章，最近在写flutter项目，flutter-go给了很大的帮助！👍

Nealyang commented 4 years ago

非常感谢这篇路由文章，最近在写flutter项目，flutter-go给了很大的帮助！👍

ღ( ´･ᴗ･` )比心

Nealyang / PersonalBlog