Flutter（2）：路由管理

在 Flutter 中，通过 Navigator 组件来管理页面堆栈。它提供了一系列方法来实现页面之间的导航操作。

MaterialPageRoute 是 Flutter 提供的一种常用的 Route 实现，它主要用于在应用程序中创建具有 Material 风格过渡效果的页面导航。当从一个页面导航到另一个页面时，MaterialPageRoute 会提供默认的过渡效果，使页面之间的切换看起来更加流畅和自然。除此之外，MaterialPageRoute 允许向目标页面传递参数，以及从前一个页面获取返回结果。

1. 导航到新页面（push）

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

Navigator 类中第一个参数为 context 的静态方法都对应一个 Navigator 的实例方法，所以上述代码也可以写成：

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

2. 返回到前一个页面（pop）

Navigator.pop(context);

除了返回上一页面之外，有时会有一些返回到自定义页面的需求，这时可以使用 popUntil 方法。如 Navigator.popUntil(context, (route) => route.isFirst); 来检查是否到达第一个页面。

int count = 0;
Navigator.popUntil(context, (route) {
  return count++ == 2;			// 向前返回两个页面
});

3. 传递数据到新页面

// 当前页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage(id)),
)
// 新页面
class NewPage extends StatefulWidget {
  final int newId;

  NewPage(this.newId);
  // ...
}

在两个页面之间传递参数时，需要参数类型和顺序匹配，参数名称不需要非得一样。

除此之外，还可以通过 RouteSettings 传递参数，新页面可以通过 ModalRoute.of(context).settings.arguments 来获取传递的参数。

// 当前页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NewPage(),
    settings: RouteSettings(
      arguments: id,
    ),
  ),
)
// 新页面
final newId = ModalRoute.of(context)!.settings.arguments;

4. 从上一页面回传数据

// 当前页面
final newId = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);
// 上一页面
Navigator.pop(context, id);

5. 替换当前页面（replace）

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
)

pushReplacement 方法用于将页面堆栈中的当前页面直接替换成新页面，这意味着不能通过返回操作来返回到之前的页面。

5. 带有命名的页面导航（pushNamed）

// 在应用程序的MaterialApp中定义路由表
MaterialApp(
  routes: {
    '/home': (context) => HomePage(),
    '/old': (context) => OldPage(),
    '/new': (context) => NewPage(),
  },
  // ...
)
// 当前页面
Navigator.pushNamed(context, '/new');

// 命名路由传参
Navigator.of(context).pushNamed('/new', arguments: 'hi');
// 新页面
var args = ModalRoute.of(context).settings.arguments;