面试题：Flutter中Navigator组件在复杂应用页面间传参的最佳实践

1. 通过 Navigator.push 方法传递参数

适用场景：适用于简单的、一次性的数据传递，例如传递一个用户ID用于详情页展示用户信息。
优点：
- 实现简单，直接在跳转时将参数作为 Navigator.push 方法的参数传递。
- 代码直观，易于理解和维护。
缺点：
- 对于复杂的数据结构传递不够灵活，尤其是嵌套较深的数据。
- 传递的数据量较大时，代码可读性会下降。

示例代码：

// 跳转页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(data: '传递的数据'),
  ),
);

// 接收页面
class DetailPage extends StatelessWidget {
  final String data;
  DetailPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('详情页')),
      body: Center(child: Text('接收到的数据: $data')),
    );
  }
}

2. 使用 ModalRoute.of(context).settings.arguments 传递参数

适用场景：适用于稍微复杂一些的数据传递场景，在跳转时不需要明确指定接收页面的参数类型，灵活性较高。
优点：
- 可以传递任何类型的数据，包括复杂的对象。
- 跳转逻辑与接收逻辑分离，使代码结构更清晰。
缺点：
- 需要在接收页面进行类型判断，否则可能会出现运行时错误。
- 代码相对复杂，不如第一种方式直观。

示例代码：

// 跳转页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(),
    settings: RouteSettings(arguments: {'key': 'value', 'num': 123}),
  ),
);

// 接收页面
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    if (args is Map) {
      return Scaffold(
        appBar: AppBar(title: Text('详情页')),
        body: Center(child: Text('接收到的数据: $args')),
      );
    } else {
      return Scaffold(
        appBar: AppBar(title: Text('详情页')),
        body: Center(child: Text('参数类型错误')),
      );
    }
  }
}

3. 使用 Provider 状态管理传递数据

适用场景：适用于多个页面之间共享数据，或者需要在不同层级的页面之间传递数据的场景，比如用户登录信息在多个页面中需要使用。
优点：
- 可以实现数据的全局共享，方便不同页面访问和修改。
- 解耦了页面之间的直接依赖关系，提高了代码的可维护性和可扩展性。
缺点：
- 引入了状态管理库，增加了项目的复杂度。
- 如果使用不当，可能会导致性能问题，例如不必要的重建。

示例代码：首先，定义一个数据模型和 Provider：

import 'package:flutter/material.dart';

class UserData with ChangeNotifier {
  String? name;
  void updateName(String newName) {
    name = newName;
    notifyListeners();
  }
}

class UserDataProvider extends InheritedWidget {
  final UserData data;
  const UserDataProvider({super.key, required Widget child, required this.data})
      : super(child: child);

  static UserData of(BuildContext context) {
    final UserDataProvider? result =
        context.dependOnInheritedWidgetOfExactType<UserDataProvider>();
    assert(result != null, 'No UserDataProvider found in context');
    return result!.data;
  }

  @override
  bool updateShouldNotify(UserDataProvider oldWidget) => data != oldWidget.data;
}

然后，在应用顶层提供数据：

void main() {
  runApp(
    UserDataProvider(
      data: UserData(),
      child: MyApp(),
    ),
  );
}

在需要传递数据的页面中：

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userData = UserDataProvider.of(context);
    return Scaffold(
      appBar: AppBar(title: Text('页面1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            userData.updateName('新名字');
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Page2()),
            );
          },
          child: Text('跳转到页面2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userData = UserDataProvider.of(context);
    return Scaffold(
      appBar: AppBar(title: Text('页面2')),
      body: Center(child: Text('接收到的数据: ${userData.name}')),
    );
  }
}

星途面试题库

面试题：Flutter中Navigator组件在复杂应用页面间传参的最佳实践

知识考点

面试题答案

1. 通过 Navigator.push 方法传递参数

2. 使用 ModalRoute.of(context).settings.arguments 传递参数

3. 使用 Provider 状态管理传递数据