在 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;