Flutter命名路由 #
一、路由表配置 #
1.1 基本配置 #
dart
MaterialApp(
routes: {
'/': (context) => HomePage(),
'/detail': (context) => DetailPage(),
'/settings': (context) => SettingsPage(),
},
)
1.2 initialRoute #
dart
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomePage(),
'/login': (context) => LoginPage(),
},
)
二、路由跳转 #
2.1 pushNamed #
dart
Navigator.pushNamed(context, '/detail');
2.2 pushReplacementNamed #
dart
Navigator.pushReplacementNamed(context, '/home');
2.3 popAndPushNamed #
dart
Navigator.popAndPushNamed(context, '/detail');
三、onGenerateRoute #
3.1 动态路由 #
dart
MaterialApp(
onGenerateRoute: (settings) {
switch (settings.name) {
case '/detail':
final id = settings.arguments as String;
return MaterialPageRoute(
builder: (context) => DetailPage(id: id),
);
default:
return null;
}
},
)
Navigator.pushNamed(context, '/detail', arguments: '123');
四、总结 #
4.1 核心概念 #
| 概念 | 说明 |
|---|---|
| routes | 路由表 |
| initialRoute | 初始路由 |
| onGenerateRoute | 动态路由生成 |
4.2 下一步 #
让我们学习 路由传参!
最后更新:2026-03-28