Flutter入门指南(六)路由

发表于 | 分类于 ， | | 阅读次数:

上一节撸了个界面，虽然比较简单，但是把前面讲的知识串联了下，但是界面之间的跳转一直没说，这节就讲下 Flutter 中的「路由」来管理界面。

1、Navigator

Flutter 通过 Navigator 来进行页面之间的跳转，分为 push 系列和 pop 系列操作，带 push 方法为入栈操作，带 pop 方法为出栈操作。Navigator 的 push 方法分两类，一类是带 Name 的，需要在 MaterialApp 下将 routers 属性进行注册，否则将会找不到该路由，还有一个是不带 Name 的，可以通过 Router 直接跳转。

说那么多相信还不如直接上代码和图来的更直接。因为需要展示所有的跳转至少需要 3 个页面，所以我们创建最简单的三个界面，通过文字来区别不同的页面，因为需要调用带有 Name 的方法，所以需要先在 MaterialApp 对路由进行注册。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning Demo',
      // 在这里注册路由，关联 name 和界面
      // '/' 表示根页面，也就是 home 所对应的页面，这边就不需要配置 home 属性了
      routes: {'/': (_) => APage(), '/page_b': (_) => BPage(), '/page_c': (_) => CPage()},
      debugShowCheckedModeBanner: false,
    );
  }
}

/// Page A，Button 的跳转事件等会进行修改，目前先空着
class APage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page A'),
      ),
      body: Center(child: RaisedButton(onPressed: () {}, child: Text('To Page B'))),
    );
  }
}

/// Page B
class BPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page B'),
      ),
      body: Center(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
        RaisedButton(onPressed: () {}, child: Text('To Page C')),
        RaisedButton(onPressed: () {}, child: Text('Back Page A'))
      ])),
    );
  }
}

/// Page C
class CPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page C'),
      ),
      body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[RaisedButton(onPressed: () {}, child: Text('Back Last Page'))])),
    );
  }
}

push / pushNamed 方式跳转

我们在 APage 的 RaiseButton 的 onPressed 方法加入如下代码

1
Navigator.push(context, MaterialPageRoute(builder: (_) => BPage()));

或者

1
Navigator.pushNamed(context, '/page_b');

效果相同。跳转后，可以发现，在 BPage 的 AppBar 上有个返回按钮，点击可以返回 APage ，那么也就是说通过 push 或者 pushNamed 方式跳转的时候，界面堆栈的变化是直接在原来的堆栈上添加一个新的 page

为了凸显堆栈的变化，所以绘制的图中，会比使用的实际页面多一个，下图同

pushReplacement / pushReplacementNamed / popAndPushNamed

将 APage 中的跳转方式进行替换

1
Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => BPage()));

或者

1
Navigator.pushReplacementNamed(context, '/page_b');

或者

1
2
3
/ 如果是第一个界面跳转到下个界面，勿用，`BPage` 会显示返回按钮，但是点击后，界面会变黑
// 因为 `APage` 已经不在堆栈中了，点击后堆栈就没有 `Page` 了，所以界面变黑
Navigator.popAndPushNamed(context, '/page_b');

效果相同，跳转后，可以发现 BPage 的返回按钮消失了，消失了，消失了，我们可以试下点击返回按键，发现 App 直接退出了，也就是说，BPage 替代了 APage 在堆栈中的位置。那么堆栈的变化图就是这样的

pushAndRemoveUntil / pushNamedAndRemoveUntil

CASE 1

这个跳转方式需要通过 CPage 来协助完成，将 APage 的跳转方式修改为 push 方式，然后在 BPage 的第一个按钮加入如下代码

1
2
Navigator.pushAndRemoveUntil(context, 
                   MaterialPageRoute(builder: (_) => CPage()), (Route router) => false);

或者

1
Navigator.pushNamedAndRemoveUntil(context, '/page_c', (Route router) => false);

效果相同，点击 BPage 的跳转 CPage 按钮后，界面来到 CPage，然后发现还是没有返回按钮，没有返回按钮，没有返回按钮，点击下返回按键，然后发现 App 直接退出了，退出了，退出了，那么堆栈变化如图

CASE 2

你以为这两个方法只是为了把堆栈都清空吗，那就太图样图森破了，这边展示另一种。修改跳转的代码

1
2
Navigator.pushAndRemoveUntil(context, 
                MaterialPageRoute(builder: (_) => CPage()), ModalRoute.withName('/'));

或者

1
Navigator.pushNamedAndRemoveUntil(context, '/page_c', ModalRoute.withName('/'));

点击跳转 CPage 以后，发现返回按钮又回来了…就这么回来了…只是修改了一个参数，点击返回按钮，又回到了 APage，你可以在 APage 跳转 BPage 中加入DPage EPage 等等更多的界面，只要保证 BPage 跳转 CPage 的方式不变，点击 CPage 的返回按钮，又回到 APage 了，所以…堆栈的变化图如下

SUMMARY

为什么会这样变化呢，还记得在 MaterialApp 中注册的 router 么，APage 的 name 对应的为 ‘/‘，也就是说，该方法会把堆栈中在 ModalRoute.withName 所对应的 page 上的所有都 pop 出堆栈，如果把参数换成 /page_b，然后在跳转 CPage 之前加入更多的界面，点击 CPage 的返回按钮，就会回到 BPage

pop

在 BPage 的第二个按钮中加入 pop 操作

1
Navigator.pop(context);

跳转到 BPage 后点击该按钮，界面回到 APage，那么堆栈的变化很明显了，如图

popUntil

这个方法还需要借助 CPage ，在 CPage 的按钮中加入

1
Navigator.popUntil(context, ModalRoute.withName('/'));

点击返回按钮，界面跳过 BPage 回到了 APage，解释同 pushAndRemoveUntil 那么堆栈的变化也显而易见咯

2、Navigator 传值

CASE 1 传值给下个界面

修改下 BPage 和 APage 的按钮点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class BPage extends StatelessWidget {
  final String message;

  BPage({Key key, @required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('passed value: $message');
    return Scaffold(
      // 省略相同代码
    );
  }
}

// APage 跳转事件
Navigator.push(context, MaterialPageRoute(builder: 
                                          (_) => BPage(message: 'Message From Page A')));

点击 APage 可以查看控制台有输出

2019-03-17 00:04:06.854 12868-12888/com.kuky.demo.flutterartsdemosapp I/flutter: passed value: Message From Page A

也就是成功把值传递过来了。但是，需要传递参数的话，之前在 MaterialApp 下注册的路由就需要去除了。

CASE 2 传值给上个界面

这边可以查看下 pop 方法

1
2
3
4
5
@optionalTypeArgs
  // pop 可以传入一个可选参数 result，这个 result 也就是回传给上个页面的参数值了
  static bool pop<T extends Object>(BuildContext context, [ T result ]) {
    return Navigator.of(context).pop<T>(result);
  }

既然知道 pop 如何传递值给上个界面，那么如何在上个界面接收这个参数呢，还是看下 push 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@optionalTypeArgs
  static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
  }

///
@optionalTypeArgs
  Future<T> push<T extends Object>(Route<T> route) {
    // ...省略无关代码
    // 这边返回一个 Future 值，`pop` 所传递的值会在这边返回
    return route.popped;
  }

/// The future completes with the value given to [Navigator.pop], if any.
Future<T> get popped => _popCompleter.future;

官方的注释非常明白的指出，会在 Future 中携带 pop 传递的参数，那么我们对 APage跳转 BPage 以及 BPage 返回 APage 的逻辑进行修改

1
2
3
4
5
6
7
/// APage
Navigator.push(context, MaterialPageRoute(builder: (_) 
                                          => BPage(message: 'Message From Page A')))
                    .then((value) => print('BACK MESSAGE => $value'));
                    
                    /// BPage
Navigator.pop(context, 'Message back to PageA From BPage');

点击返回后，能够在控制台发现有如下输入

2019-03-17 16:35:53.820 13417-13442/com.kuky.demo.flutterartsdemosapp I/flutter: BACK MESSAGE => Message back to PageA From BPage

上个页面成功接收到下个页面回传的数据。

CASE 3 通过系统返回按钮传值

在 CASE 2 情况下，通过按钮对返回事件进行监听，那加入我们需求没有这个按钮，只能通过系统默认的返回按钮，或者物理返回按键，那该如何传值呢，这里就需要用 WillpopScope 对系统的返回按钮进行监听。我们对 CPage 做下修改，在 Scaffold 外面包裹一个 WillpopScope

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class CPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Page C'),
          ),
          body: Center(
              child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
            RaisedButton(
                onPressed: () {
                  Navigator.popUntil(context, ModalRoute.withName('/'));
                },
                child: Text('Back Last Page'))
          ])),
        ),
        // 这里对系统返回按钮做监听..
        // 如果返回的是 `true` 则相当于 `pop` 操作，返回 `false` 则只执行上一步的 `pop` 操作
        // 例如双击返回退出，也是通过 `WillpopScope` 来进行监听
        onWillPop: () async {
          Navigator.pop(context, 'Hello~');
          return false;
        });
  }
}

通过返回按钮，BPage 会成功收到从 CPage 返回的 Hello~ 值

以上代码查看 router_main.dart 文件

3、路由切换动画

假如说我们不想用系统自带的切换动画，需要弄一些比较酷炫的效果该怎么办，那就需要用到自定义路由切换动画了。直接修改 BPage 跳转 CPage 的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Navigator.push(
    context,
    PageRouteBuilder(
        // 返回目标页面
        pageBuilder: (context, anim, _) => CPage(),
        // 切换动画的切换时长
        transitionDuration: Duration(milliseconds: 500),
        // 切换动画的切换效果，系统自带的常用 Transition
        // ScaleTransition: 缩放  SlideTransition: 滑动
        // RotationTransition: 旋转  FadeTransition: 透明度
        transitionsBuilder: (context, anim, _, child) => ScaleTransition(
              // Tween 是 flutter 的补间动画，等讲到动画的时候再提吧，这边先记住这么使用
              scale: Tween(begin: 0.0, end: 1.0).animate(anim),
              // 这个值必须记得要传，否则会不显示界面
              child: child,
            )));

当再次点击跳转的时候，切换的动画就有开始自带的平滑效果变成缩放效果了。那如果要实现多个动画呢，例如边缩放，边改变透明度，也很容易实现，只需要将 child 替换成 Transition 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
Navigator.push(
    context,
    PageRouteBuilder(
        pageBuilder: (context, anim, _) => CPage(),
        transitionDuration: Duration(milliseconds: 500),
        transitionsBuilder: (context, anim, _, child) => ScaleTransition(
              scale: Tween(begin: 0.0, end: 1.0).animate(anim),
              // 替换即可，如果要加入更多的动画，替换 `child` 属性就可以了
              child: FadeTransition(
                opacity: Tween(begin: 0.0, end: 1.0).animate(anim),
                child: child,
              ),
            )));

当然，为了方便重复利用，需要进行封装，例如我们要封装上面的缩放动画效果

1
2
3
4
5
6
7
8
9
10
11
12
class ScalePageRoute extends PageRouteBuilder {
  final Widget widget;

  ScalePageRoute(this.widget)
      : super(
            transitionDuration: Duration(milliseconds: 500),
            pageBuilder: (context, anim, _) => widget,
            transitionsBuilder: (context, anim, _, child) => ScaleTransition(
                  scale: Tween(begin: 0.0, end: 1.0).animate(anim),
                  child: child,
                ));
}

然后直接在 Navigator 跳转的时候调用该 Route 就可以了

该部分代码查看 custom_routes.dart 文件

还记得我们之前写的 demo 都是单个文件写一个入口的吗，现在我们就可以写一个统一管理的页面，对这些界面进行管理了，这个工作就交给大家伙自己了，当然我也在源码做了修改，可以查看 main.dart 文件

代码地址:

https://github.com/kukyxs/flutter_arts_demos_app

坚持原创技术分享，您的支持将鼓励我继续创作！