面试题：Flutter 中 MaterialPageRoute 构建个性化导航栏时如何传递参数

Question

在利用 MaterialPageRoute 打造 Flutter 应用的个性化导航栏场景下，若从一个页面跳转到另一个页面并需要传递一些数据（如用户信息），请简述如何实现参数传递，并给出关键代码示例。

Answer 1

1. 参数传递简述：
   • 在Flutter中，使用MaterialPageRoute进行页面跳转并传递数据时，可以在构造目标页面的路由时，将需要传递的数据作为参数传递给目标页面的构造函数。
2. 关键代码示例：
   • 源页面（发起跳转的页面）：

import 'package:flutter/material.dart';
import 'destination_page.dart';

class SourcePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> userInfo = {
      'name': 'John Doe',
      'age': 30
    };
    return Scaffold(
      appBar: AppBar(
        title: Text('源页面'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('跳转到目标页面'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DestinationPage(userInfo: userInfo),
              ),
            );
          },
        ),
      ),
    );
  }
}

• 目标页面（接收数据的页面）：

import 'package:flutter/material.dart';

class DestinationPage extends StatelessWidget {
  final Map<String, dynamic> userInfo;

  DestinationPage({required this.userInfo});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('目标页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('用户名: ${userInfo['name']}'),
            Text('年龄: ${userInfo['age']}'),
          ],
        ),
      ),
    );
  }
}