Flutter使用FutureBuilder时页面持续重建问题求解

根本原因 #

当前代码的核心问题是把 future: initLikes() 直接写在了 build 方法内部。
每次Widget树发生重建时，这行代码都会重新执行、生成一个全新的 Future 实例。而 FutureBuilder 的内部判断逻辑是：只要检测到传入的 Future 对象和上一次渲染时的不是同一个引用，就会重置自身状态、重新监听新Future的执行结果，这个过程会反过来触发更多页面重建动作，最终形成无限循环。

具体修复步骤 #

1. 缓存Future实例，避免重复创建 #

无论用什么写法，都要保证 initLikes() 只被调用一次、生成一个全局唯一的Future实例，不要让它跟着build流程反复执行。

• 对StatefulWidget页面来说，最直接的方式是把Future存到State类的成员变量里，仅在页面初始化时创建一次：

// State类的成员变量，缓存Future实例
late Future<bool> _cachedInitLikesFuture;

@override
void initState() {
  super.initState();
  // 仅在页面首次初始化时执行一次接口请求，生成固定的Future
  _cachedInitLikesFuture = initLikes();
}

• 把FutureBuilder的future参数替换为这个缓存好的实例，不要在参数里直接写方法调用：

FutureBuilder(
  // 直接传入缓存的Future，禁止在这里写initLikes()
  future: _cachedInitLikesFuture,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    // 原有无数据时的占位逻辑可以保留
    if (!snapshot.hasData) {
      return SizedBox();
    }
    // 补充缺失的错误判断，避免接口报错时静默白屏
    if (snapshot.hasError) {
      return const Center(child: Text("加载失败，请检查网络后重试"));
    }
    // 正常加载完成后的UI逻辑
    return Expanded(
      child: ListView.builder(
          physics: const ClampingScrollPhysics(),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          controller: _scrollController,
          itemCount: GlobalProfile.listForMe.length + 1,
          itemBuilder: (BuildContext context, int index) {
            if(index == GlobalProfile.listForMe.length){
              return const CupertinoActivityIndicator();
            }
            else {
              return const Column();
            }
          }
      ),
    );
  }
)

2. 其他容易触发循环的雷区 #

• 不要在FutureBuilder的builder回调里执行修改全局状态、触发setState的操作，这类动作会无差别触发整棵页面树重建，哪怕Future已经缓存好也可能出现异常
• 如果需要手动刷新列表数据，不要直接重新调用initLikes()触发FutureBuilder更新，要主动给缓存的Future变量重新赋值（比如setState(() => _cachedInitLikesFuture = initLikes())），让FutureBuilder感知到新的任务，不要靠页面自然重建触发请求

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