Flutter路由传参 #
一、构造函数传参 #
1.1 基本用法 #
dart
class DetailPage extends StatelessWidget {
final String id;
final String title;
const DetailPage({
required this.id,
this.title = '',
});
}
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailPage(id: '123', title: 'Detail'),
),
);
二、命名路由传参 #
2.1 使用arguments #
dart
Navigator.pushNamed(
context,
'/detail',
arguments: {'id': '123', 'title': 'Detail'},
);
onGenerateRoute: (settings) {
if (settings.name == '/detail') {
final args = settings.arguments as Map<String, dynamic>;
return MaterialPageRoute(
builder: (context) => DetailPage(
id: args['id'],
title: args['title'],
),
);
}
}
三、返回数据 #
3.1 等待返回结果 #
dart
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SelectPage()),
);
if (result != null) {
print('Selected: $result');
}
3.2 返回数据 #
dart
Navigator.pop(context, 'Selected Item');
四、总结 #
4.1 传参方式 #
| 方式 | 说明 |
|---|---|
| 构造函数 | 直接传参 |
| arguments | 命名路由传参 |
| 返回数据 | pop返回结果 |
4.2 下一步 #
让我们学习 底部导航!
最后更新:2026-03-28