Nealyang/PersonalBlog

fluro介绍以及路由配置

Nealyang opened this issue · 2 comments

前言

无论在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命名规范(视团队规范而定)

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

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

ღ( ´・ᴗ・` )比心