The Navigation between Flutter Routes

Navigation 纵览

容易想象到的是，客户端的导航逻辑具有相似性。对具有原生app经验的开发者来说，它可以类比于 native app 开发中的“页面”跳转（Android 中的 Activity, iOS 中的 ViewController）。同样UI层面的概念在Flutter也出现了，它就是 Route其关联的有Widget, 较为常见的Widget有 StatelessWidget 或是 StatefulWidget ；同时与跳转逻辑相关的还有Navigator, 而 Navigator 本身也是一个Widget (Flutter中 Widget无处不在！😊)，它遵循Stack栈的规则管理着一系列子Widget。

最直接的页面跳转方式

使用 MaterialPageRoute :

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

Route 利用一个builder方法定义自身的Widget，而非直接传入一个子Widget, 这是因为基于自身被Pushed 或是 Popped的不同context环境下，它会被构建以及重建（built and rebuilt）。

具名的 Route

手机上的App通常会有大量的Route, 而通过名字去找到相应的Route往往也更容易。按照约定Route的名字和路径的表示(path-like structure)比较相像。"/" 用以表示 App 的Home页面的Route。

MaterialApp 在创建的时候可以指定其 routes (结构为 Map<String, WidgetBuilder>)，它保留了 Route的名字与创建对应Widget build 方法的映射关系。

 MaterialApp(
   home: MyAppHome(), // becomes the route named '/'
   routes:   {
     '/a_route_name': (BuildContext context) => YourWidget(),
   },
 )

按名字显示一个Route :

Navigator.pushNamed(context, '/a_route_name');

参数传递

设置传入参数

同样使用 MaterialPageRoute，可以设置其可选参数settings 传入参数:

MaterialPageRoute(
  builder: (BuildContext context) {
    return YourWidget();
  },
  settings: RouteSettings(arguments: your_param_object),
);

对于具名的Route，类似的方法有:

Navigator.pushNamed(context, routeName, arguments: your_param_object);

读取传入的参数

class MyWidget {
  @override
  Widget build(BuildContext context) {
    final MyArgs args = ModalRoute.of(context).settings.arguments;
    // ...
  }
}

设置传出的参数

在第2个Widget中 (SelectionScreen) 设定返回值

Navigator.pop(context, 'Yep!');

在首个Widget中接收:

_navigateAndDisplaySelection(BuildContext context) async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SelectionScreen()),
  );

  // After the Selection Screen returns a result, hide any previous snackbars
  // and show the new result.
  Scaffold.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text("$result")));
}

Flutter 页面跳转小结