Flutter多页面MVVM架构下通用过滤器状态管理方案咨询

问题场景 #

• 多个页面共享通用过滤器状态，可在任意页面修改该状态
• 每个页面拥有依赖通用过滤器的专属状态，通用状态变更时需调用API更新所有页面的专属状态
• 过滤器初始值需通过REST API获取
• 采用MVVM架构，当前使用Provider实现但应用频繁出现无响应崩溃

现有实现的问题分析 #

1. 无限通知循环风险：ChangeNotifierProxyProvider的update方法会在CommonVm每次notifyListeners时触发，而PageAVm的updateCommonVm又会调用notifyListeners，可能导致循环通知，引发UI阻塞。
2. 未处理异步状态：没有处理API请求的加载、错误状态，用户操作时可能触发重复请求，导致UI无响应。
3. 内存泄漏隐患：PageAVm持有CommonVm引用但未移除监听，页面销毁后可能残留引用导致内存泄漏。
4. 状态初始化风险：页面VM初始化时直接读取CommonVm，若CommonVm的API请求未完成，会导致初始状态异常。

Provider优化方案 #

1. 重构CommonVm：完善异步初始化与状态管理 #

添加加载、错误状态，处理初始过滤器的API请求，避免未初始化状态：

class CommonVm extends ChangeNotifier {
  int _num = 0;
  bool _isLoading = false;
  String? _error;

  int get count => _num;
  bool get isLoading => _isLoading;
  String? get error => _error;

  // 从API获取初始过滤器值
  Future<void> fetchInitialFilter() async {
    _isLoading = true;
    notifyListeners();
    try {
      // 替换为实际API请求逻辑
      await Future.delayed(const Duration(seconds: 1));
      _num = 5; // API返回的初始值
      _error = null;
    } catch (e) {
      _error = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  void increment() {
    if (_isLoading) return; // 加载中禁止操作
    _num++;
    notifyListeners();
  }
}

2. 重构页面VM：内部监听CommonVm，避免ProxyProvider循环 #

让页面VM直接监听CommonVm的状态变化，移除对ChangeNotifierProxyProvider的依赖，减少不必要的通知：

class PageAVm extends ChangeNotifier {
  final CommonVm _commonVm;
  late final VoidCallback _commonListener;

  int _square = 0;
  bool _isLoading = false;
  String? _error;

  int get square => _square;
  bool get isLoading => _isLoading;
  String? get error => _error;

  PageAVm({required CommonVm commonVm}) : _commonVm = commonVm {
    // 初始化时计算一次专属状态
    _updateSquare();
    // 监听CommonVm的状态变更
    _commonListener = () => _updateSquare();
    _commonVm.addListener(_commonListener);
  }

  // 模拟API请求：根据通用状态更新专属状态
  Future<void> _updateSquare() async {
    _isLoading = true;
    notifyListeners();
    try {
      // 替换为实际API请求逻辑
      await Future.delayed(const Duration(milliseconds: 500));
      _square = _commonVm.count * _commonVm.count;
      _error = null;
    } catch (e) {
      _error = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  @override
  void dispose() {
    // 移除监听，防止内存泄漏
    _commonVm.removeListener(_commonListener);
    super.dispose();
  }
}

3. 优化Provider注册：简化依赖关系 #

使用普通ChangeNotifierProvider注册页面VM，避免ProxyProvider的循环触发问题：

// main.dart中的Provider配置
MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) {
      final vm = CommonVm();
      vm.fetchInitialFilter(); // 初始化时加载过滤器
      return vm;
    }),
    // 注册PageA的VM
    ChangeNotifierProvider(create: (context) => PageAVm(commonVm: context.read<CommonVm>())),
    // 同理注册PageB的VM
    ChangeNotifierProvider(create: (context) => PageBVm(commonVm: context.read<CommonVm>())),
  ],
  child: const MyApp(),
)

4. 优化页面UI：处理加载与错误状态 #

在页面中添加加载、错误状态的展示，避免UI无响应，同时防止用户重复操作：

class PageAState extends State<PageA> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      floatingActionButton: Consumer<CommonVm>(
        builder: (context, commonVm, child) {
          return FloatingActionButton(
            onPressed: commonVm.isLoading ? null : commonVm.increment,
            child: commonVm.isLoading 
                ? const CircularProgressIndicator(color: Colors.white) 
                : const Icon(Icons.add),
          );
        },
      ),
      body: Column(
        children: [
          // 通用过滤器状态展示
          Consumer<CommonVm>(
            builder: (context, commonVm, child) {
              if (commonVm.isLoading) return const CircularProgressIndicator();
              if (commonVm.error != null) return Text('加载失败: ${commonVm.error}');
              return Text('Number: ${commonVm.count}');
            },
          ),
          // 页面专属状态展示
          Consumer<PageAVm>(
            builder: (context, pageAVm, child) {
              if (pageAVm.isLoading) return const CircularProgressIndicator();
              if (pageAVm.error != null) return Text('加载失败: ${pageAVm.error}');
              return Text('Square: ${pageAVm.square}');
            },
          ),
        ],
      ),
    );
  }
}

其他可选状态管理方案 #

如果Provider优化后仍无法满足需求，可考虑：

• Riverpod：Provider的升级替代方案，支持无上下文依赖、异步状态组合、更灵活的状态管理，适合复杂多页面场景。
• Bloc/Cubit：基于事件流的状态管理，状态变更由事件触发，逻辑清晰，便于调试和测试，适合需要严格状态流程的场景。

内容的提问来源于stack exchange，提问作者Aurora Borealis