面试题：Flutter中MaterialPageRoute在多页面应用里如何处理页面传参

Question

在Flutter的多页面应用中，使用MaterialPageRoute进行页面跳转时，常常需要传递参数。请描述如何在MaterialPageRoute配置中实现简单数据类型（如字符串、整数）以及复杂对象的参数传递，并给出相应的代码示例。

Answer 1

简单数据类型（字符串、整数）传递

1. 传递参数： 在 MaterialPageRoute 的 builder 函数中，将要传递的参数通过构造函数传递给目标页面。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: "Hello, this is a string", number: 42),
  ),
);

2. 接收参数： 目标页面定义对应的变量来接收传递过来的参数。

class SecondPage extends StatelessWidget {
  final String data;
  final int number;

  SecondPage({required this.data, required this.number});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received string: $data'),
            Text('Received integer: $number'),
          ],
        ),
      ),
    );
  }
}

复杂对象传递

1. 定义可传递的复杂对象： 该对象需要实现 Serializable 或 jsonEncode 等以便在页面间传递，这里以 Serializable 为例。

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final String name;
  final int age;

  User(this.name, this.age);

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

2. 传递参数：

final user = User('John', 30);
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ThirdPage(user: user),
  ),
);

3. 接收参数：

class ThirdPage extends StatelessWidget {
  final User user;

  ThirdPage({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Third Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received user name: ${user.name}'),
            Text('Received user age: ${user.age}'),
          ],
        ),
      ),
    );
  }
}