Flutter如何防止FutureBuilder每次build重复调用future函数

安全阿岳

2026-8-29

问题产生原因

首先明确FutureBuilder的核心运行逻辑：它不会主动重复执行传入的Future，只要两次build时传入的Future是同一个实例引用，FutureBuilder就会复用之前的请求状态，不会重复触发执行。
你把Future初始化逻辑移到initState后仍然出现重复调用，本质都是传入FutureBuilder的Future实例发生了变化，或者组件State被反复销毁重建，常见触发场景包括：

组件本身没有加const构造，父组件触发重建时，当前HomeScreen的State被直接销毁重建，而非正常的复用更新。这种场景下initState会被重新执行，自然会重新调用getCategories()。比如上层组件setState、MediaQuery/Theme等全局InheritedWidget更新、页面栈上层页面pop返回当前页面时，都可能触发无const修饰的子组件完整重建。
代码中存在隐式的重新赋值逻辑：比如在didUpdateWidget、didChangeDependencies或者某个setState回调中，不小心给categories变量重新赋值了新的CategoryRepository().getCategories()实例，每次build都会传入新的Future触发执行。
部分路由场景下的生命周期触发：比如使用Navigator 2.0、或者页面切后台再切回前台时，组件可能触发deactivate后重新initState，导致初始化逻辑重复执行。

很多人对官方文档的建议存在误解：官方说“提前在initState中获取Future实例”，核心要求是保证组件生命周期内传入FutureBuilder的Future引用稳定唯一，不是只要把初始化代码写在initState就可以一劳永逸。

正确解决方式

根据不同的业务场景，可以选择以下几种方案，从根源上避免重复调用：

基础场景（不需要手动刷新请求）：用late final修饰Future变量保证引用不可变，同时给组件添加const构造，避免非必要的组件重建

class HomeScreen extends StatefulWidget {
  // 必须定义const构造
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 直接在属性声明时初始化，final保证后续不会被重新赋值
  late final Future<List<Category>> categories = CategoryRepository().getCategories();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(
          future: categories,
          builder: (BuildContext context, AsyncSnapshot<List<Category>> snapshot) {
            if (snapshot.hasData) {
              return const SomeWidget();
            }
            return const OtherWidget();
          }
      ),
    );
  }
}

需要手动刷新/重新请求的场景：仅在明确需要触发新请求时，才给categories变量赋值新的Future实例，不要在生命周期回调中无差别重新赋值

class _HomeScreenState extends State<HomeScreen> {
  late Future<List<Category>> categories;

  @override
  void initState() {
    super.initState();
    // 初始化时只赋值一次
    categories = _fetchCategories();
  }

  Future<List<Category>> _fetchCategories() {
    return CategoryRepository().getCategories();
  }

  // 仅在下拉刷新等主动触发场景下，才更新Future实例
  Future<void> _handleRefresh() async {
    setState(() {
      categories = _fetchCategories();
    });
  }

  // build逻辑和之前保持一致，不要在build里给categories赋值
}

多页面/前后台切换频繁的场景：在数据仓库层增加缓存逻辑，就算Future被重复触发，也直接返回本地缓存结果，不会产生多余的网络请求或计算

class CategoryRepository {
  List<Category>? _cache;

  Future<List<Category>> getCategories() async {
    // 存在缓存直接返回，不重复发起请求
    if (_cache != null) return _cache!;
    // 原有请求逻辑
    final res = await // 你的网络请求/数据库读取逻辑
    _cache = res;
    return res;
  }

  // 需要强制刷新时可以调用清空缓存的方法
  void clearCache() {
    _cache = null;
  }
}

注意：永远不要直接在FutureBuilder的future参数位置写请求方法，比如future: CategoryRepository().getCategories()，这种写法每次build都会生成全新的Future实例，必然会导致重复调用，是官方明确禁止的写法。

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