欢迎来到我的个人博客

Flutter 学习之旅09 路由与导航

  • ~10.41K 字

1 路由基础

1.1 基本概念

在前端应用中，页面又称路由，是屏幕或应用程序页面的抽象。

Flutter的路由管理和导航借鉴了前端和客户端中的设计思路，提供了Route和Navigator对路由进行统一管理。

Route是页面的一个抽象概念，可以用它创建界面、接收参数以及响应Navigator的打开与关闭；Navigator用于管理和维护路由栈，打开路由页面即执行入栈操作，关闭路由页面即执行出栈操作。

Navigator组件的常用操作方法：

1）push()：将给定的路由页面放到路由栈里面，返回值是一个Future对象，用于接收路由出栈时的返回数据；

2）pop()：将位于栈顶的路由从路由栈移除，返回结果为路由关闭时上一个页面所需的数据。

在Flutter开发中，根据是否需要提前注册路由标识符，路由管理可以分为基本路由和命名路由两种。

1.2 基本路由

基本路由无需提前注册，在页面切换时需要手动构造页面的实例，使用起来相对简单灵活，适用于应用中页面不多的场景。

如果要打开一个新的页面，需要创建一个MaterialPageRoute对象实例，然后调用Navigator.push()；如果要返回上一个页面，调用Navigator.pop()。

MaterialPageRoute是Flutter提供的路由模板，是PageRoute的子类，定义了路由创建及切换时过渡动画的相关接口和属性，并自带页面切换动画。

示例代码：

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
import 'package:flutter/material.dart';

void main() => runApp(RoutePage());

class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '路由--基本路由',
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第一个页面')),
      body: Center(
        child: RaisedButton(
          child: Text('跳转到第二个页面'),
          onPressed: () => Navigator.push(
            context, 
            MaterialPageRoute(builder: (context) => SecondPage()),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二个页面')),
      body: Center(
        child: RaisedButton(
          child: Text('返回上一个页面'),
          onPressed: () => Navigator.pop(context),
        ),
      ),
    );
  }
}

示例效果：

img

1.3 命名路由

命名路由需要提前注册路由页面标识符，在页面切换时通过路由标识符打开一个新的路由页面。

在Flutter中，路由表是一个Map<String, WidgetBuilder>结构，其中第一个参数对应页面的别名，第二个参数对应页面。

1
2
3
4
5
6
7
MaterialApp(
  routes: {//注册路由
    'first': (context) => FirstPage(),
    'second': (context) => SecondPage(),
  },
  initialRoute: 'firse',//初始路由页面
)

在路由表中注册好页面后，在其他页面中通过Navigator.pushNamed()来打开注册的页面。

1
Navigator.pushNamed(context, 'second');

Flutter提供了一个onUnknownRoute属性，用来在注册路由表时对未知的路由标识符进行统一的页面跳转处理。

示例代码：

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
59
60
61
import 'package:flutter/material.dart';

void main() => runApp(RoutePage());

class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '路由--命名路由',
      home: FirstPage(),
      routes: {
        '/first': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
      initialRoute: '/first',
      onUnknownRoute: (RouteSettings setting) => MaterialPageRoute(builder: (context) => UnknownPage()),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第一个页面')),
      body: Center(
        child: RaisedButton(
          child: Text('跳转到第二个页面'),
          onPressed: () => Navigator.pushNamed(context, '/scond'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第二个页面')),
      body: Center(
        child: RaisedButton(
          child: Text('返回上一个页面'),
          onPressed: () => Navigator.pushNamed(context, '/first'),
        ),
      ),
    );
  }
}

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('错误路由')),
      body: Center(
        child: Text('跳转路由错误！'),
      )
    );
  }
}

示例效果：

img

1.5 路由传参

可以在打开路由时传递参数，在目标页面通过ModalRoute的RouteSettings获取页面传递的参数。

如果需要返回上一个页面时回传参数，可以在使用push()打开目标页面时使用then()监听目标页面的返回值。

示例代码：

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import 'package:flutter/material.dart';

void main() => runApp(RoutePage());

class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '路由--路由传参',
      home: FirstPage(),
      routes: {
        '/first': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FirstPageState();
  }
}

class FirstPageState extends State<FirstPage> {
  String result = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个页面'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'from second page: ' + result,
              style: TextStyle(fontSize: 20)
            ),
            RaisedButton(
              child: Text('跳转'),
              onPressed: () {
                Navigator.of(context)
                         .pushNamed('/second', arguments: 'from first page')
                         .then((msg) => setState(() => result = msg)); 
              },
            )
          ],
        )
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String msg = ModalRoute.of(context).settings.arguments as String;
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              'from first screen: ' + msg,
              style: TextStyle(fontSize: 20)
            ),
            RaisedButton(
              child: Text('返回'),
              onPressed: () => Navigator.pop(context, 'from second page'),
            )
          ],
        )
      ),
    );
  }
}

示例效果：

img

2 路由栈

Flutter路由栈其实就是一个后进先出的线性表，路由栈管理本质上就是一个入栈和出栈的过程，入栈就是将页面放到路由栈的顶部，出栈则是从路由的顶部移除页面。

1）pushReplacementNamed

使用pushReplacement或pushReplacementNamed打开一个新页面时，路由栈顶部的页面会被当前页面所替换。

2）popAndPushNamed

popAndPushNamed的作用与pushReplacementNamed类似，打开一个新页面时，路由栈的栈顶页面会被当前页面替换。

不同的是，popAndPushNamed会同时执行出栈和入栈动画，而pushReplacementNamed只执行入栈动画。

3）pushNamedAndRemoveUntil

pushNamedAndRemoveUntil和pushAndRemoveUntil的作用类似，主要用于向路由栈中添加一个新页面，并删除路由栈中所有之前的页面。

1
Navigator.pushNamedAndRemoveUntil(context, ‘page_c’, (Route router) => false);

如果不需要清空之前的页面，可以将表达式设置为true，即(Route router) => true。

除了用于删除路由栈中所有之前的页面外，pushNamedAndRemoveUntil还可以用来删除指定个数的页面。

1
Navigator.pushNamedAndRemoveUntil(context, ‘page_d’, ModalRoute.withName(‘page_b’));

上面的代码会打开一个新的页面page_d，同时删除page_b页面之上的所有页面。

如果要移除路由栈中某个指定的页面，可以使用Navigator.removeRoute()或者Navigator.removeRouteBelow()。

1
2
3
Navigator.removeRoute(context, MaterialPageRoute(builder: (context) => PageC()));
//或者
Navigator.removeRouteBelow(context, MaterialPageRoute(builder: (context) => PageC()));

上面的代码会从路由栈中移除PageC页面。

4）popUntil

popUntil的作用与pushNamedAndRemoveUntil类似，主要用于清除指定页面之上的所有页面。popUntil没有执行push操作，直接执行pop操作，直到返回到指定的页面。

1
Navigator.popUntil(context, ModalRoute.withName(‘page_a’));

上面的代码会清除page_a页面之上的所有页面。

3 自定义路由

如果要修改默认的路由转场动画，就需要做一些自定义开发。在Flutter中，自定义路由需要用到PageRouteBuilder类，PageRouteBuilder是所有自定义路由的基类。

PageRouteBuilder的构造函数如下：

1
2
3
4
5
6
7
8
9
10
11
12
PageRouteBuilder(
  RouteSettings settings,
  @required this.pageBuilder,//用来创建所需要跳转的路由页面
  this.transitionsBuilder = _defaultTransitionsBuilder,//用自定义转场动画
  this.transitionDuration = const Duration(milliseconds: 300),//自定义转场动画的执行时间
  this.opaque = true,//是否需要遮挡整个页面
  this.barrierDismissible = false,
  this.barrierColor,
  this.barrierLabel,
  this.maintainState = true,
  bool fullscreenDialog = false, 
)

示例代码：

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
59
60
61
62
63
64
65
66
67
68
69
70
71
import 'package:flutter/material.dart';

void main() => runApp(RoutePage());

class RoutePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '路由--自定义路由',
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第一个页面'),
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
              child: Text('跳转'),
              onPressed: () {
                Navigator.of(context).push(CustomRoute(SecondPage()));          
              },
            )
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String msg = ModalRoute.of(context).settings.arguments as String;
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
              child: Text('返回'),
              onPressed: () => Navigator.pop(context),
            )
      ),
    );
  }
}


class CustomRoute extends PageRouteBuilder {
  final Widget widget;
  CustomRoute(this.widget): super(
    transitionDuration: Duration(seconds: 1),
    pageBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2) {
      return widget;
    },
    transitionsBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2, Widget child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0)
        ).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
        child: child
      );
    }
  );
}

除了使用Flutter提供的路由方案外，还可以使用第三方路由框架来实现页面的管理和跳转。Fluro是一款优秀的Flutter企业级路由框架，非常适合中大型项目，它具有层次分明、条理化、方便扩展和便于整体管理路由等特点。

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可