Flutter中如何检测Provider值变化并结合MVVM实现数据更新？

问题根源 #

切回初始过滤选项数据不更新的核心原因：

1. 直接修改FilterProvider内部列表元素，列表引用未发生变化，导致部分场景下的状态对比逻辑失效
2. 未在过滤值变化（包括回退到初始值）时主动触发ViewModel重新加载数据

步骤1：优化FilterProvider的状态更新逻辑 #

修改FilterProvider，每次更新过滤值时创建新的列表实例，确保状态变化可被正确检测：

import 'package:flutter/material.dart';

class FilterProvider extends ChangeNotifier {
  List<String> _filterItems = [
    "usd",
    "top100",
    "1hr",
  ];
  // 返回不可变列表，避免外部直接修改内部状态
  List<String> get filterItems => List.unmodifiable(_filterItems);

  void setPrice(String price) {
    // 创建新列表并修改对应位置的值
    _filterItems = List.from(_filterItems)..[0] = price;
    notifyListeners();
  }

  void setCTS(String noOfCoins) {
    _filterItems = List.from(_filterItems)..[1] = noOfCoins;
    notifyListeners();
  }

  void setPriceChange(String change) {
    _filterItems = List.from(_filterItems)..[2] = change;
    notifyListeners();
  }
}

步骤2：在CoinsPage中监听过滤值变化并触发数据加载 #

修改CoinsPage的状态类，保存上一次的过滤值，每次过滤值变化时（包括回退到初始值），调用ViewModel重新加载数据：

class CoinsPage extends StatefulWidget {
  const CoinsPage({super.key});

  @override
  State<CoinsPage> createState() => _CoinsPageState();
}

class _CoinsPageState extends State<CoinsPage> {
  late CoinsViewModel viewModel = CoinsViewModel();
  List<CoinDetailsModel>? item;
  List<String>? _previousFilters; // 保存上一次的过滤参数

  @override
  void initState() {
    super.initState();
    // 初始加载使用默认过滤值
    viewModel.loadCoinData(
      "marketCap", 
      "desc", 
      priceCurrency: "usd", 
      topN: "top100", 
      timeRange: "1hr"
    );
    viewModel.scrollController.addListener(viewModel.pagination);
  }

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double columnWidth = screenWidth / 5;
    double mar = (columnWidth / 5) + 1;

    return ChangeNotifierProvider<CoinsViewModel>(
      create: (BuildContext context) => viewModel,
      child: Consumer2<CoinsViewModel, FilterProvider>(
        builder: (context, viewModel, filterProvider, _) {
          final currentFilters = filterProvider.filterItems;

          // 对比当前与上一次的过滤值，不同则触发重新加载
          if (_previousFilters != currentFilters) {
            viewModel.loadCoinData(
              "marketCap", 
              "desc", 
              priceCurrency: currentFilters[0], 
              topN: currentFilters[1], 
              timeRange: currentFilters[2]
            );
            // 保存当前过滤值（用List.from避免引用相同）
            _previousFilters = List.from(currentFilters);
          }

          item = viewModel.coinsModel;
          debugPrint("Filter ${currentFilters[0]}");

          return Scaffold(
            // 你的页面布局内容
          );
        },
      ),
    );
  }
}

步骤3：更新CoinsViewModel的loadCoinData方法 #

确保ViewModel的加载方法能接收过滤参数并用于API请求：

class CoinsViewModel extends ChangeNotifier {
  List<CoinDetailsModel> coinsModel = [];
  ScrollController scrollController = ScrollController();

  void loadCoinData(
    String sortBy, 
    String sortOrder, {
    required String priceCurrency,
    required String topN,
    required String timeRange,
  }) async {
    // 这里使用传入的过滤参数构造API请求
    // 示例逻辑：
    // final response = await apiService.fetchCoins(
    //   sortBy: sortBy,
    //   sortOrder: sortOrder,
    //   currency: priceCurrency,
    //   limit: int.parse(topN.replaceAll("top", "")),
    //   timeRange: timeRange,
    // );
    // coinsModel = response.data;
    // notifyListeners();
  }

  void pagination() {
    // 你的分页逻辑
  }
}

关键说明 #

• 通过创建新列表实例，确保FilterProvider的状态变化能被正确检测，即使切回初始值，也会因为列表引用不同触发重新加载
• 保存上一次过滤值的逻辑，避免重复调用API（只有过滤值真的变化时才触发加载）
• 使用List.unmodifiable对外暴露过滤列表，防止外部代码意外修改Provider内部状态

内容的提问来源于stack exchange，提问作者Shaikh Faizan