flutter中的路由

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 916 | 阅读时长 ≈ 4

前言

路由是native中应用的比较多，特别是组件化的工程中，更是用来解耦的利器，比较常用的有阿里的ARouter等，路由这一思想也是借鉴前端而来，比如web中页面跳转就是一个url就到了一个新的页面，Flutter既然是新一代的跨端方案，而且从RN借鉴了不少思想，路由当然也是必不可少的，本篇将了解下Flutter的路由

Flutter的路由

在Flutter中支持所有路由场景，push、pop页面，页面间的参数传递等等。flutter里面的路由可以分成两种，

  • 一种是直接注册，不能传递参数，可以称 为静态路由
  • 一种要自己构造实例，可以传递参数，可以称为 动态路由。

静态路由

在创建时就已经明确知道了要跳转的页面和值，在新建一个MD风格的App的时候，可以传入一个routes参数来定义路由。但是这里定义的路由是静态的，它不可以向下一个页面传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@override
Widget build(BuildContext context) {
  return new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
      primarySwatch: Colors.blue,
    ),
    //注册路由表
    routes: {
      "router/static_page": (context) => StaticRoute(),
    },
    home: new MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

通过routes这个属性注册好跳转的页面即key-value，上面的代码中

key：router/static_page value: StaticRouter
然后使用的时候使用

1
2
3
4
5
6
7
FlatButton(
  child: Text("open static router"),
  textColor: Colors.blue,
  onPressed: () {
    Navigator.pushNamed(context, "router/static_page");
  },
)

动态路由

当需要向下一个页面传递参数时，要用到所谓的动态路由，自己生成页面对象，所以可以传递自己想要的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
FlatButton(
  child: Text("open dynamic router"),
  textColor: Colors.blue,
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(
        builder: (context) {
          return new EchoRoute("传入跳转参数");
        }));
    或者
    Navigator.of（(context).push(MaterialPageRoute(
        builder: (context) {
          return new EchoRoute("传入跳转参数");
        }));
  },
)

点击返回

1
2
3
4
5
6
7
8
new RaisedButton(
  child: new Text("点我返回"),
  onPressed: () {
    Navigator.of(context).pop();
  },
  color: Colors.blue,
  highlightColor: Colors.lightBlue,
)

我们可以在前一个页面接受第二个页面的返回值
在第一个页面跳转时候加上futrue来接收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
FlatButton(
  child: Text("open dynamic router"),
  textColor: Colors.blue,
  onPressed: () {
    Future future = Navigator.push(context,
        MaterialPageRoute(builder: (context) {
      return new EchoRoute("传入跳转参数");
    }));
    //接收动态页面返回时传回的值
    future.then((value) {
      showDialog(
          context: context,
          child: new AlertDialog(
            title: new Text(value),
          ));
    });
  },

在EchoRoute页面 返回时使用带参数的pop方法

1
2
3
4
5
6
7
8
9
new RaisedButton(
                child: new Text("点我返回"),
                onPressed: () {
//                  Navigator.of(context).pop();
                  Navigator.of(context).pop("我是来自dymamic 关闭的返回值");
                },
                color: Colors.blue,
                highlightColor: Colors.lightBlue,
              )

这样就会在关闭EchoRoute回到跳转前页面时弹出dialog收到EchoRoute传来的参数

小结

Navigator的职责是负责管理Route的，管理方式就是利用一个栈不停压入弹出，当然也可以直接替换其中某一个Route。而Route作为一个管理单元，主要负责创建对应的界面，响应Navigator压入路由和弹出路由

入栈：

  • 使用Navigator.of(context).pushName(“path“)或者Navigator.pushName(context,“path“)可以进行静态路由的跳转前提是需要在route属性里面注册
  • 使用push(Route)可以进行态路由的跳转，动态路由可以传入未知数据

出栈

  • 使用pop()可以进行路由的出栈并且可以传递参数
  • 可以使用Future接收上个页面返回的值。

代码在 https://github.com/xsfelvis/learnflutter/blob/e7bd2e29c1b39c8ea19e06bfebb6e7d55b9ab42a/lib/demo4/demo4main.dart

#

0%