Flutter学习(四)——路由和导航

Posted on 2021-05-05 In Flutter 学习之路

页面由一个个的 Widget 组合而成，一个个页面组合就形成了我们使用的应用。那么多个页面之间如何进行跳转和管理呢？Flutter 提供了两个核心的类来帮助开发者。

Route：路由是应用程序页面的抽象，对应 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 管理。
Navigator：Navigator 是一个组件，管理和维护一个基于堆栈的历史记录，Navigator 提供了一系列方法来管理路由栈。

根据是否需要提前注册页面标识符，Flutter 中的路由管理可以分为两种方式：

基本路由。无需提前注册，在页面切换时需要自己构造页面实例。
命名路由。需要提前注册页面标识符，在页面切换时通过标识符直接打开新的路由。

MaterialPageRoute

MaterialPageRoute 继承自 PageRoute类，PageRoute 类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是 Material 组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

对于 Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于 iOS，当打开页面时，新的页面会从屏幕右侧边缘一直滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

MaterialPageRoute({
  WidgetBuilder builder,
  RouteSettings settings,
  bool maintainState = true,
  bool fullscreenDialog = false,
})

builder：是一个 WidgetBuilder 类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个 widget。我们通常要实现此回调，返回新路由的实例。
settings：包含路由的配置信息，如路由名称、是否初始路由（首页）。
maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置 maintainState 为 false。
fullscreenDialog：表示新的路由页面是否是一个全屏的模态对话框，在 iOS 中，如果 fullscreenDialog 为 true，新页面将会从屏幕底部滑入（而不是水平方向）。

如果想自定义路由切换动画，可以自己继承 PageRoute 来实现，我们将在后面介绍动画时，实现一个自定义的路由组件。

Navigator

Navigator 是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator 通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator 提供了一系列方法来管理路由栈，在此我们只介绍其最常用的两个方法：

Future push(BuildContext context, Route route)

将给定的路由入栈（即打开新的页面），返回值是一个 Future 对象，用以接收新路由出栈（即关闭）时的返回数据。

bool pop(BuildContext context, [ result ])

将栈顶路由出栈，result 为页面关闭时返回给上一个页面的数据。

Navigator 还有很多其它方法，如 Navigator.replace 、 Navigator.popUntil 等，详情请参考 API 文档或 SDK 源码注释，在此不再赘述。

常规路由示例

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

命名路由

其实，就是给路由设置一个别名，并且可以在统一的管理。然后，就可以通过路由名称直接打开新路由了。

路由表

要想使用命名路由，我们必须先提供并注册一个路由表（routing table），这样应用程序才知道哪个名字与哪个路由组件相对应。

它是一个Map，key为路由的名字，是个字符串；value 是个 builder 回调函数，用于生成相应的路由 widget。我们在通过路由名字打开新路由时，应用会根据路由名字在路由表中查找到对应的 WidgetBuilder 回调函数，然后调用该回调函数生成路由 widget 并返回。

1	Map<String, WidgetBuilder> routes;

若需要使用命名路由的话，需要提前注册路由表：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/", //名为"/"的路由作为应用的home(首页)
      routes: {
        "/":(context) => const MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
        "second_page":(context) => SecondRoute(),
      }
    );
  }
}

打开页面

与常规打开路由的方式类似，使用了 Navigator 的另一个方法 Navigator.pushNamed(context, routeName):

1	Navigator.pushNamed(context, "second_page");

页面传参

在跳转页面时，我们经常需要传递一些参数。这里来举个例：

第一个页面：设置了四个按钮，点击跳转到第二个页面：

class TestHome extends StatelessWidget {
  const TestHome({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("路由与导航"),
      ),
      body: Center(
      child:Column(
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondRoute()),
              );
            },
            child: const Text("常规跳转"),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "second");
            },
            child: const Text("命名路由跳转"),
          ),
          ElevatedButton(
            onPressed: () async {
              var result = await Navigator.push(     
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return const SecondRoute();
                  },
                  settings: RouteSettings(arguments: "来自前面的传参-常规跳转")
                ),
              );
              print("路由返回值：$result");
            },
            child: const Text("常规跳转传参"),
          ),
          ElevatedButton(
            onPressed: () async {
              var result = await Navigator.of(context).pushNamed("second", arguments: "来自前面的传参-命名路由跳转");

              print("路由返回值：$result");
            },
            child: const Text("命名路由跳转传参"),
          ),
        ],
      )
    ),
    );
  }
}

第二个页面，返回时，携带返回值：

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Object? args=ModalRoute.of(context)?.settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text("提示"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(args?.toString() ?? "未接收到任何参数"),
              ElevatedButton(
                onPressed: () => Navigator.pop(context, "我是返回值"),
                child: Text("返回"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这个返回携带返回值，必须要使用我们设置的点击按钮。系统导航栏上的返回按钮是没有的。如果需要拦截系统的导航栏事件的话，目前我知道的有两种方式：
重写返回按钮
1
2
3
4
5
6
7
return Scaffold(
     appBar: AppBar(
       title: Text(widget.message),
       leading: IconButton(icon: Icon(Icons.arrow_back), > onPressed: (){

       }),
     ),
使用 WillPopScope 包裹
1
2
3
4
5
return WillPopScope(
     onWillPop: (){
       return Future.value(true);
     },
     child: Scaffold()
Future.value(true) 时自动返回

Future.value(false) 时，需要手动写返回跳转