软件开发—「Flutter--路由管理」
核心概念与基本用法
路由栈与 Navigator
Flutter 使用 Navigator组件管理一个由Route对象构成的路由栈。当前显示的页面就是栈顶的路由。Navigator.push方法将新页面推入栈顶，Navigator.pop方法则弹出当前页面。
基本路由
对于简单的页面跳转，可以直接使用MaterialPageRoute或CupertinoPageRoute，它们会自动提供与设计语言一致的切换动画。
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NewPage()),
);
命名路由
当应用页面较多时，推荐使用命名路由。先在MaterialApp中定义路由表，然后通过名称进行跳转，使路由管理更清晰、易于维护。
// 1. 定义路由表
MaterialApp(
routes: {
'/': (context) => HomePage(),
'/details': (context) => DetailsPage(),
},
);
// 2. 通过名称跳转
Navigator.pushNamed(context, '/details');
参数传递与进阶功能
传递参数
页面跳转时常需要传递参数，可以通过页面构造函数或路由的arguments属性实现。
// 方式1: 通过构造函数传递 (适用于基本路由和命名路由)
class DetailsPage extends StatelessWidget {
final String itemId;
DetailsPage({required this.itemId});
}
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailsPage(itemId: '123')),
);
// 方式2: 通过 arguments 传递 (适用于命名路由)
// 跳转时传递
Navigator.pushNamed(
context,
'/details',
arguments: '123',
);
// 目标页面接收
final args = ModalRoute.of(context)!.settings.arguments as String;
返回数据
有时需要从新页面返回数据给上一个页面，可以使用await等待push操作的结果，并在新页面使用pop返回数据。
// 在页面A中跳转并等待结果
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SelectionPage()),
);
// 在SelectionPage中返回数据
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'Selected Data');
},
)
路由钩子与拦截
MaterialApp的onGenerateRoute和onUnknownRoute提供了强大的钩子函数，用于实现动态路由生成、权限控制（路由守卫）和404错误处理等。
MaterialApp(
onGenerateRoute: (RouteSettings settings) {
// 动态路由处理，例如解析参数
if (settings.name == '/details') {
final String id = settings.arguments as String;
return MaterialPageRoute(builder: (context) => DetailsPage(id: id));
}
// 路由守卫示例：检查登录状态
if (settings.name == '/profile' && !isLoggedIn) {
return MaterialPageRoute(builder: (context) => LoginPage());
}
return null;
},
onUnknownRoute: (RouteSettings settings) {
// 处理未知路由（404）
return MaterialPageRoute(builder: (context) => UnknownPage());
},
);
总结与选型建议
复杂大型应用：优先考虑模块化路由或直接使用go_router、auto_route等第三方库，以应对嵌套导航、深度链接等复杂需求。
来源：FD优飞迪
