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