【Flutter 专题】10 页面间小跳转 (二)

和尚前两天尝试了一下 Flutter 中的页面跳转,主要时通过 Navigator 相关的 pushpop 方法进行页面跳转和基本传参,很方便也很简洁;今天和尚补充一下 Flutter 测试过程中常用的另一种页面跳转方式。

补充一

和尚上一篇在测试页面跳转时,测试的页面都是在一个 main.dart 文件中;这样自然不合理,按照正常的业务逻辑会有很多分包,这样如何跳转到其他包下或其他文件下的 Page 页面呢?其实很简单,直接引入包名文件即可:

1. import 包名 + 文件名,和尚测试发现 Flutter 没有像 Android 一样的清单文件,所以需要手动引入包名文件;

2. 正常调用对应文件中 Page 页面跳转即可;

Tips: 和尚建议不同文件中不要重名,如果本文件中有与其他包下文件中相同 Page 名称,会优先跳转到本文件中 Page 页。

补充二 fluro

和尚在学习中发现有的大神会用到 fluro,和尚也顺道学习一下,fluro 是 Flutter 关于页面跳转的三方库,它添加了灵活的 options 选项,如通配符、命名参数和清晰的跳转定义。

集成如下:

1. 在 pubspec.yaml 中添加 fluro 依赖库 fluro: "^1.3.4",如图:

2. 在需要跳转的页面引入包并初始化定义一个 Router,可以定义全局变量或静态变量,方便在其他地方引用;如图:

import 'package:fluro/fluro.dart';

Router router = new Router();
  1. 初始化之后定义 routes 和 route handlers
var homeHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return HomePage(params["data"][0]);
});

void defineRoutes(Router router) {
  router.define("/home/:data", handler: homeHandler);
}

defineRoutes(router);

Tips: params["data"][0] 中只可传0,否则数组越界。

  1. 调用跳转方式 navigateTo 即可:
onPressed: () {
  // 按 fluro 方式跳转页面并传参
  var bodyJson = {
    'user': (_phonecontroller.text),
    'pass': (_pwdcontroller.text)
  };
//  router.navigateTo(context, "/home/1234", transition: TransitionType.fadeIn);
  router.navigateTo(context, '/home/$bodyJson');
}

Tips: "/home/:data" 中的 data 可以直接传键值对,也可以传递 String/int 等类型的值,可以按需求随意传递;同事 router 也可以向自身传递数据,需添加 transition: TransitionType.fadeIn

GitHub Demo


和尚刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~

原文发布于微信公众号 - 阿策小和尚(gh_8297e718c166)

原文发表时间:2018-08-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券