使用FutureProviderFamily时如何避免Flutter页面重复构建？

核心问题：页面反复build的原因 #

每次页面build时，你都创建了一个新的Card实例作为Family参数：

card.Card()
  ..name = _searchText
  ..cardType = _cardType

由于默认情况下Card类的==和hashCode是基于对象引用判断的，哪怕两次的name和cardType完全相同，新创建的实例也会被认为是不同的参数。这会导致FutureProviderFamily反复重新执行查询，进而触发页面重复build，形成循环。

解决方案1：使用不可变的参数类型（推荐） #

改用不可变的、能正确判断相等性的类型作为Family参数，比如tuple包中的Tuple2，或者自定义不可变数据类。

步骤1：添加tuple依赖

在pubspec.yaml中加入：

dependencies:
  tuple: ^2.0.2

步骤2：修改Provider定义

将参数改为Tuple2<String, CardType>（假设_cardType是枚举类型）：

import 'package:tuple/tuple.dart';

final searchCardProvider = FutureProvider.family<List<Card>, Tuple2<String, CardType>>(
  (ref, args) async {
    final cardUtil = await ref.watch(cardUtilProvider.future);
    return cardUtil.search(
      Card()
        ..name = args.item1
        ..cardType = args.item2,
    );
  },
);

步骤3：页面中使用Provider

@override
Widget build(BuildContext context) {
  final searchArgs = Tuple2(_searchText, _cardType);
  return ref.watch(searchCardProvider(searchArgs)).when(
    loading: () => const CircularProgressIndicator(),
    error: (err, stack) => Text('查询失败：$err'),
    data: (cards) => // 渲染卡片列表
  );
}

解决方案2：重写Card类的==和hashCode #

如果坚持用Card作为参数，需要让Card类仅根据搜索相关字段（name和cardType）判断相等性：

class Card {
  String? name;
  CardType? cardType;
  // 其他字段...

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Card &&
          runtimeType == other.runtimeType &&
          name == other.name &&
          cardType == other.cardType;

  @override
  int get hashCode => Object.hash(name, cardType);
}

这样只要name和cardType相同，哪怕是新创建的Card实例，也会被认为是相同的参数，不会触发Provider重复执行。

关于过滤数据无效的排查建议 #

1. 检查CardUtil.search的查询逻辑：确保Isar查询正确应用了过滤条件，比如：

// CardUtil示例实现
Future<List<Card>> search(Card query) async {
  final isar = await Isar.open([CardSchema]);
  var queryBuilder = isar.cards.where();
  
  // 名称模糊匹配
  if (query.name?.isNotEmpty == true) {
    queryBuilder = queryBuilder.nameContains(query.name!, caseSensitive: false);
  }
  // 卡片类型精确匹配
  if (query.cardType != null) {
    queryBuilder = queryBuilder.cardTypeEqualTo(query.cardType!);
  }
  
  return queryBuilder.findAll();
}

2. 确认参数传递正确：在search方法中打印query.name和query.cardType，验证是否传入了预期的过滤值。

额外优化：用StateProvider管理搜索参数 #

将_searchText和_cardType放到StateProvider中管理，避免直接在build中依赖组件状态，进一步减少不必要的build触发：

// 全局定义参数Provider
final searchTextProvider = StateProvider<String>((ref) => '');
final cardTypeProvider = StateProvider<CardType>((ref) => CardType.all);

// 页面中使用
@override
Widget build(BuildContext context) {
  final searchText = ref.watch(searchTextProvider);
  final cardType = ref.watch(cardTypeProvider);
  final searchArgs = Tuple2(searchText, cardType);
  
  return ref.watch(searchCardProvider(searchArgs)).when(...);
}

// 更新参数的方法（比如TextFormField的onChanged）
void _onSearchTextChanged(String value) {
  ref.read(searchTextProvider.notifier).state = value;
}

内容的提问来源于stack exchange，提问作者Charitha De Silva