【Flutter 专题】09 图解页面小跳转 (二)

2021 年 11 月 14 日
本文字数：1032 字
阅读完需：约 3 分钟

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

补充一

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

import 包名 + 文件名，小菜测试发现 Flutter 没有像 Android 一样的清单文件，所以需要手动引入包名文件；

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

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

补充二 fluro

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

集成如下：

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

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

import 'package:fluro/fluro.dart';
Router router = new Router();

复制代码

3. 初始化之后定义 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，否则数组越界。

4. 调用跳转方式 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。