Flutter：如何避免带参数的FutureBuilder在页面切换时重复重建

问题核心在于：每次Widget重建（比如从其他页面切回），FutureBuilder的future参数都会执行getChamp(...)生成新的Future实例，触发重新请求。由于你的Future带有动态参数，无法提前在initState中初始化，我们可以通过缓存Future实例的方式解决。

方案1：单一参数场景的缓存 #

在State类中维护当前的Future实例和上次的参数，仅当参数变化时重新创建Future：

class _YourPageState extends State<YourPage> {
  Future? _currentChampFuture;
  String? _lastRequestedCountry;

  Future getChamp(String country) async {
    // 你的业务逻辑，比如网络请求或数据处理
    return snapshot;
  }

  @override
  Widget build(BuildContext context) {
    final currentCountry = data.keys.elementAt(index);
    
    // 仅当参数变化时，才重新获取Future
    if (currentCountry != _lastRequestedCountry) {
      _lastRequestedCountry = currentCountry;
      _currentChampFuture = getChamp(currentCountry);
    }

    return FutureBuilder(
      future: _currentChampFuture,
      builder: (context, snapshot) {
        // 根据snapshot状态构建UI
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('错误: ${snapshot.error}');
        } else {
          return Text('结果: ${snapshot.data}');
        }
      },
    );
  }
}

方案2：多参数场景的缓存（Map存储） #

如果你的参数可能有多个不同值需要缓存，可以用Map存储不同参数对应的Future实例：

class _YourPageState extends State<YourPage> {
  final Map<String, Future> _champFutureCache = {};

  Future getChamp(String country) async {
    // 你的业务逻辑
    return snapshot;
  }

  @override
  Widget build(BuildContext context) {
    final currentCountry = data.keys.elementAt(index);
    
    // 缓存中不存在对应参数的Future时，才创建并存入
    _champFutureCache.putIfAbsent(currentCountry, () => getChamp(currentCountry));

    return FutureBuilder(
      future: _champFutureCache[currentCountry],
      builder: (context, snapshot) {
        // UI构建逻辑
      },
    );
  }

  @override
  void dispose() {
    // 页面销毁时清理缓存，避免内存泄漏
    _champFutureCache.clear();
    super.dispose();
  }
}

关键原理 #

FutureBuilder会监听future参数的实例变化：只有当传入的Future是新实例时，才会重新执行异步操作并重建UI。通过缓存实例，我们确保在参数未变化时，始终传递同一个Future给FutureBuilder，从而避免页面切换时的重复调用。

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