Flutter中FutureBuilder嵌套布局下Future被无限重复调用问题排查

这个问题我之前开发时也碰到过，核心原因其实是你直接把异步函数调用传给了FutureBuilder的future参数，而不是提前保存好的Future实例。

为什么会无限重复调用？ #

SingleChildScrollView内部的Column很容易因为各种场景触发Widget的build方法——比如滚动时的布局调整、父组件状态更新、甚至系统的UI自动刷新。每次build执行时，ProductLoaderUtil.getSimilarProducts(...)都会被重新调用一次，相当于每次都新建了一个Future，自然就会无限重复请求数据了。

解决方案：提前初始化并保存Future实例 #

最稳妥的办法是把Future的初始化逻辑和Widget的build方法解耦，确保Future只被执行一次。

方法1：在StatefulWidget的initState中初始化（推荐）

如果你的组件是Stateful的，把Future的初始化放到initState里，这里只会在组件创建时执行一次：

class _ProductDetailState extends State<ProductDetail> {
  Future<List<ProductItem>>? _similarProductsFuture;
  double _height = 0;

  @override
  void initState() {
    super.initState();
    // 在这里初始化Future，只会执行一次
    _similarProductsFuture = ProductLoaderUtil.getSimilarProducts(
      context, widget.productItem.productCategoryId
    );
    // 屏幕高度也建议在这里初始化，避免build重复计算
    _height = MediaQuery.of(context).size.height;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          FutureBuilder(
            future: _similarProductsFuture, // 使用提前保存的Future实例
            builder: (context, snapshot) {
              if (snapshot.hasData && !snapshot.hasError) {
                return ListProductHorizontal(
                  productItemsHorizontal: snapshot.data,
                  flag: false,
                );
              } else {
                return Container(
                  height: _height * 0.06,
                  color: FakeWhite,
                );
              }
            },
          ),
          // 其他子组件
        ],
      ),
    );
  }
}

方法2：处理参数动态变化的场景

如果你的productCategoryId可能会动态更新，那需要在参数变化时重新初始化Future，这时候可以用didUpdateWidget方法：

@override
void didUpdateWidget(covariant ProductDetail oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 如果categoryId发生变化，重新请求数据
  if (oldWidget.productItem.productCategoryId != widget.productItem.productCategoryId) {
    setState(() {
      _similarProductsFuture = ProductLoaderUtil.getSimilarProducts(
        context, widget.productItem.productCategoryId
      );
    });
  }
}

额外提醒 #

• 永远不要在build方法里直接创建Future并传给FutureBuilder，这是Flutter官方文档明确标注的反模式
• 如果你的组件是StatelessWidget，建议转为StatefulWidget来处理这种需要持有异步状态的场景，或者使用flutter_hooks这类库的useFuture钩子简化状态管理

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