Flutter 基础路由管理、Fluro库的使用和二次封装

在原生开发中，安卓和IOS自有控制页面（Activity、ViewControl)跳转的功能，在flutter中，路由管理变得更加统一灵活高效。

路由管理需求

在Flutter中，万物皆组件，页面也是组件，路由则是组件之间的跳转、传值，常见的需求有下面四种：

  1. 跳转下一页
  2. 返回上一页
  3. 正向传值
  4. 反向传值

我们主要研究这四种操作的方式，在每个项目中都必备的需求。

MaterialApp 内置的路由管理

在 MaterialApp 中内置的路由管理，有两种操作方式：

  1. 未声明路由，使用实例化组件直接跳转
  2. 声明路由，使用路由的名称进行跳转

两种方式各有优劣，项目中酌情选择，第一种方式更灵活，简单除暴，但无法统一管理，比较松散，第二种可以统一管理，使用路由name进行对应操作，但是传值、取值可能较麻烦。

前面说了，flutter中的页面也是组件，所以我们首先用Scaffold脚手架创建两个独立的页面： HomePage 和 NextPage。用这两个页面来实现后续的所有需求：

不声明路由

1. 跳转下一页

无需声明组件，直接使用api跳转到回调中的组件页面：

// HomePage 页面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
          },
          child: Text("跳转到第二页"),
        ),
      ),
    );
  }
}

// NextPage 页面
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Text("Next Page"),
      ),
    );
  }
}
在这里插入图片描述

直接使用api，就可以进行快速的页面跳转，其中关键跳转代码

...
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
...

因为是默认的跳转方式，在安卓和苹果端会有不同的动画效果：安卓中是从下到上的渐隐，而ios中则是从右向左的滑入。

2. 跳转传值

传值的话，应该一看就非常清楚，在对应页面设置数据属性，实例化时，直接设置即可，关键代码：

// HomePage
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) {
  return NextPage(
    data: "Home Page Data",
  );
}));
...
// NextPage
class NextPage extends StatelessWidget {
  String data;
  NextPage({this.data});
...
}

3. 返回上一页

...
Navigator.pop(context);
...

4. 反向传值

上面说到的Navigator.pop方法的第二个参数可以传递一个任何类型的数据，该参数就是反向传值的内容。

而首页中的Navigator.push方法返回一个Future，就是出栈页面的Navigator.pop函数的第二个参数，我们使用async和await可以快速的获取其中的内容：

//
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () async {
            var returnData = await Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
            print("Next Page 返回给 Home Page： ${returnData}");
          },
          child: Text("跳转到第二页"),
        ),
      ),
    );
  }
}

//
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pop(context, {"data": "反向传值内容"});
              },
              child: Text("返回上一页"),
            )
          ],
        ),
      ),
    );
  }
}

跳转到NextPage后点击返回上一页，可以看到控制台输出内容：

I/flutter (11371): Next Page 返回给 Home Page： {data: 反向传值内容}

这是靠Navigator.pop函数进行的返回传值操作，如果点击页面AppBar中的返回图标返回值则为 null

声明路由

1. 跳转到下一页

MaterialApp 内置了路由管理功能，在 MaterialApp 类中的 routes 参数中声明路由名称和对应组件：

class FeDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (ctx) => HomePage(),
        "NextPage": (ctx) => NextPage(),
      },
    );
  }
}

在声明了名称和组件后，我们就可以直接使用name来进行路由操作：

...
// 'NextPage' 已声明为 NextPage() 组件
Navigator.pushNamed(context, "NextPage");
...

2. 返回上一页

返回上一页的方式，在两种管理方式中都是一样的，使用 Navigator.pop

...
Navigator.pop(context, {"a": "反向传值"});
...

3. 正向传值

正向传值就有所不同，因为在未声明路由的方式中，我们可以直接接触到对应页面的对象，但是在声明路由的方式中，对应对象在声明时就已经创建好了，在跳转时无法直接获取到了，所以传值和获取的方式有所不同。

传值时，使用Navigator.pushNamed中的arguments参数：

...HomePage
// 'NextPage' 已声明为 NextPage() 组件
Navigator.pushNamed(context, "NextPage", arguments: "传值");
...

获取时，使用下面的代码：

... NextPage
// 获取值
var data = ModalRoute.of(context).settings.arguments;
...

4. 反向传值

和未声明的方式一致，Navigator.pushNamed同样返回Future。

Fluro路由库

flutter的出现，随之诞生了一批优秀的库，fluro就是其中之一。

它更灵活、耦合更低、支持各种页面切换动画，进行简单的二次封装就可以实现轻松的路由管理、权限拦截。

基本使用

fluro是需要提前对路由进行声明的，而且所有的路由操作都需要适用全局的Router对象。

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

final router = Router();

void main() {
  // 声明路由
  router.define(
    "/NextPage",
    handler: Handler(
      handlerFunc: (ctx, params) {
        return NextPage();
      },
    ),
  );
  runApp(FeDemoApp());
}

class FeDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

//
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () async {
            var returnData = await router.navigateTo(
              context,
              "/NextPage",
              transition: TransitionType.nativeModal,
            );
            print("返回值： ${returnData}");
          },
          child: Text("跳转到第二页"),
        ),
      ),
    );
  }
}

//
class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Next Page"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("返回上一页"),
            )
          ],
        ),
      ),
    );
  }
}
在这里插入图片描述

我们可以通过修改跳转动画 TransitionType.cupertino 来实现在安卓端显示ios的滑入滑出效果。

在这里插入图片描述

fluro二次封装类

下面是对fluro的简单封装，统一了全局的路由对象，路由名称使用了静态参数，跳转方式也进行了样式统一，页面拦截也很容易拓展：

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

import 'main.dart' as Main;

class App {
  static final router = Router();

  static String HomePage = "/HomePage";
  static String NextPage = "/NextPage";

  // 初始化路由
  static void initRouter() {
    var routers = {
      "${HomePage}": Handler(
        handlerFunc: (ctx, params) => Main.HomePage(),
      ),
      "${NextPage}": Handler(
        handlerFunc: (ctx, params) => Main.NextPage(),
      ),
    };

    routers.forEach((key, value) {
      router.define(key, handler: value);
    });
  }

  static Future<dynamic> PageTo(BuildContext context, String path) {
    return router.navigateTo(
      context,
      path,
      transition: TransitionType.nativeModal,
    );
  }

  static Future<dynamic> AuthTo(BuildContext context, String path) {
    // TODO: 验证权限，再决定向哪跳转
    var auth = true;
    if (auth) {
      return router.navigateTo(
        context,
        path,
        transition: TransitionType.nativeModal,
      );
    } else {
    // 验证失败，跳转到了首页
      return router.navigateTo(
        context,
        HomePage,
        transition: TransitionType.nativeModal,
      );
    }
  }
}

简单封装，可以留言发表不同的思路！

在这里插入图片描述
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,045评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,114评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,120评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,902评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,828评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,132评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,590评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,258评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,408评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,335评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,385评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,068评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,660评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,747评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,967评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,406评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,970评论 2赞 341