具有多个页面的 Flutter 中的状态处理

Question

我正在尝试找出构建 Flutter 应用程序的好方法。我有几个页面，可以导航到其他页面。一个页面修改的数据，可能被其他页面使用，需要更新。我最近开始使用 Provider 包。我让每个页面都有一个实现 ChangeNotifier 的模型，并在 MaterialApp 之上设置一个 ChangeNotifierProvider。现在要更新其他页面的数据，我必须获取其他页面的模型并对其调用更新方法。这很乱。我使用 Firestore，所以我可以监听数据库的变化，但我想避免太多魔法。此外，有时只将数据从一个页面发送到另一个页面而不使用网络调用或在 Navigator.pop 方法中传回数据是有意义的。我发现很难在如何解决这个问题上做出好的选择。我可能应该看看更精致的架构，如 redux 或 mobx。或者只是寻求一个普通的解决方案，并为所有各种事件使用大量的回调。每页那些 big'ol 模型，一段时间后似乎有点臃肿和凌乱。有没有人在 Flutter 中有类似的经验来构建这些东西？困惑

Answer 1

使用 Provider（或任何实现 BloC 模式的库）和 Repository 模式应该可以在本地处理 move/store 数据。基本上每个 Bloc/Provider 都会得到一个存储库实例和 read/write 值。因为存储库实例始终相同，所以您将更新所有数据。

此外，您还可以使用本地数据库，如 SQLite（带有 sqflite 包）或纯 NoSQL 数据库 Hive。

我个人不喜欢 Redux，但 mobx 是一个非常好的选择。

Answer 2

使用 provider to apply the BLoC pattern and combining it with RxDart 是解决这个问题的一种方法。

例如，您可以创建一个 AppBloc:

class AppBloc {
  StreamController<UserInputState> _userInputController =
    BehaviorSubject<UserInputState>.seeded(UserInputState('NOTHING'));
  StreamSink<UserInputState> get userInputSink => _userInputController.sink;
  Observable<UserInputState> get userInputObs => Observable(_userInputController.stream);

  AppBloc();
}

class UserInputState {
  final String input;

  const UserInputState(this.input);
}

在页面上您可以通过它传递数据：

final appBloc = Provider.of<AppBloc>(context);
appBloc.userInputSink.add(UserInputState("input"));

另外一个页面可以监听数据：

final appBloc = Provider.of<AppBloc>(context);
appBloc.userInputObs.
    .where((state) => state.input == "input")
    .listen((state) => /* do something */);

我在这里对其进行了简化，但是这可以成为一种以反应方式处理数据的非常稳健的方式。

美妙之处在于您可以将 Observable 绑定到 StreamBuilder（Flutter 的一部分）以使 UI 也具有响应性！

具有多个页面的 Flutter 中的状态处理

State handeling in Flutter with multiple pages

flutter

design-patterns

architecture

google-cloud-firestore

flutter-provider