如何为当前用例设置状态管理架构？

Question

在我的 flutter 应用程序中，我将有多个页面。 现在考虑 2 页。这两个页面都有一些通用的过滤器，可以从任一页面进行修改。这两个页面还具有一些附加状态，其值可能取决于公共过滤器状态。当页面的公共状态发生更改时，可能还需要进行 API 调用来更新页面的非公共状态。 另外，假设我从一个页面修改公共过滤器状态，另一页面的非公共状态也应该改变，因为这也取决于公共状态。

此外，这些过滤器是可配置的，因此，我将调用 REST API 来获取过滤器的初始值，例如日期等。

此外，我想使用 MVVM 架构来分离视图和状态（视图模型）层之间的关注点。

如何构建这样的设置？

我尝试按以下方式使用 Provider。 下面提到的是我尝试过的架构的最小可重现设置。

// 主要片段

/// Common provider for the Module
ChangeNotifierProvider(create: (_) => CommonVm()),

/// Provider for the Page A
ChangeNotifierProxyProvider<CommonVm, PageAVm>(
   create: (context) => PageAVm(
     commonVm: context.read<CommonVm>(),
   ),
   update: (context, commonVm, pageAVm) {
     return pageAVm!..updateCommonVm(commonVm);
   },
),

// 普通VM

class CommonVm extends ChangeNotifier {
  int _num = 0;
  int get count => _num;

  void increment() {
    _num++;
    notifyListeners();

  }
}

//页面A片段

class PageAState extends State<PageA>
    with AutomaticKeepAliveClientMixin {
  /// We want this page to be alive so that init function is not called again
  /// and again, when switching tabs
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          CommonVm commonVm = context.read<CommonVm>();
          commonVm.increment();
        },
        child: Icon(Icons.add),
      ),
      body: Column(
        children: [
          Consumer<CommonVm>(
            builder: (context, value, child) {
              return Text('Number: ${value.count}');
            },
          ),
          Consumer<PageAVm>(
            builder: (context, value, child) {
              return Text('Square: ${value.square}');
            },
          ),
        ],
      ),
    );
  }

//页面特定虚拟机

/// View model for the Safety Home Page
class PageAVm extends ChangeNotifier {
  PageAVm({required this.safetyCommonVm});

  /// Common View Model for the module
  CommonVm commonVm;

  /// When this will get sets, something in the common has updated
  /// which should trigger an update in the other states
  void updateCommonVm(CommonVm vm) {
    commonVm = vm;
    // show loading
    // call API and update state
    _square = commonVm.count * commonVm.count;
    notifyListeners();
  }

  int _square = 0;
  int get square => _square;
}

示例中可能有类似的 PageB 和 PageBVm。

我不确定这是否正确。我注意到很多应用程序在这种设置下崩溃了。 （显示应用程序没有响应弹出窗口）。 请建议如何解决这个问题/设置。该应用程序已经使用 Provider 来处理某些状态，我也喜欢这样做。但我想知道，其他一些状态管理解决方案将更适用于我当前的用例。

Answer 1

您可以在这种情况下使用Bloc。

例如， 创建区块的步骤

1. 您可以为跨屏幕的过滤器创建一个通用的过滤器块
2. 您可以为每个页面创建 2 个单独的块，这将有助于页面的状态管理 这样你就可以使用 MVVM 调用 api。这个设置会很有帮助。 如果需要，请回复示例代码。