Flutter中加载状态的正确处理方式——单页面多FutureBuilder统一加载屏实现方案

嘿，这个场景我太熟悉了——多个FutureBuilder各自转圈圈确实会让页面显得杂乱，体验感很差。其实咱们只需要换个思路，把所有异步请求的加载状态统一管理起来，就能实现全局只显示一个加载屏的效果。下面是两种常用的正确处理方式：

方法一：用Future.wait()合并所有异步请求 #

这是最直接的方案：把需要执行的多个异步请求打包成一个列表，通过Future.wait()等待所有请求完成，然后在页面根节点根据这个合并后的Future状态，统一控制加载屏或内容的展示，彻底告别多个零散的加载指示器。

示例代码如下：

class UnifiedLoadingPage extends StatefulWidget {
  @override
  _UnifiedLoadingPageState createState() => _UnifiedLoadingPageState();
}

class _UnifiedLoadingPageState extends State<UnifiedLoadingPage> {
  late Future<List<dynamic>> _combinedRequests;

  @override
  void initState() {
    super.initState();
    // 将4个异步请求放入列表，用Future.wait合并
    _combinedRequests = Future.wait([
      fetchUserData(),
      fetchProductList(),
      fetchOrderHistory(),
      fetchRecommendations(),
    ]);
  }

  // 模拟第一个异步请求
  Future<String> fetchUserData() async {
    await Future.delayed(const Duration(seconds: 2));
    return "用户：张三";
  }

  // 其余三个异步请求类似，这里省略实现...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("统一加载示例")),
      body: FutureBuilder<List<dynamic>>(
        future: _combinedRequests,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 所有请求完成前，只显示一个全局加载屏
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 统一处理错误状态
            return Center(child: Text("加载失败：${snapshot.error}"));
          } else {
            // 所有数据就绪，渲染完整页面
            final userData = snapshot.data![0];
            final productList = snapshot.data![1];
            final orderHistory = snapshot.data![2];
            final recommendations = snapshot.data![3];

            return SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(userData),
                  ),
                  // 后续根据各个数据渲染对应的组件即可，无需再用FutureBuilder
                  ProductListWidget(products: productList),
                  OrderHistoryWidget(orders: orderHistory),
                  RecommendationsWidget(items: recommendations),
                ],
              ),
            );
          }
        },
      ),
    );
  }
}

方法二：手动维护加载状态（适配复杂场景） #

如果你的异步请求不是同时触发，或者需要更精细的状态控制（比如某个请求失败后仍要展示其他已加载内容），可以手动维护一个加载状态变量，逐个监听请求完成状态，全部完成后再关闭加载屏。

示例代码：

class ManualLoadingPage extends StatefulWidget {
  @override
  _ManualLoadingPageState createState() => _ManualLoadingPageState();
}

class _ManualLoadingPageState extends State<ManualLoadingPage> {
  bool _isLoading = true;
  String? _userData;
  List<String>? _productList;
  int? _orderCount;
  List<String>? _recommendations;

  @override
  void initState() {
    super.initState();
    _loadAllData();
  }

  Future<void> _loadAllData() async {
    try {
      // 并行执行所有请求
      await Future.wait([
        _fetchUserData(),
        _fetchProductList(),
        _fetchOrderCount(),
        _fetchRecommendations(),
      ]);
    } catch (e) {
      print("加载出错：$e");
      // 这里可以根据需求处理错误，比如弹窗提示
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Future<void> _fetchUserData() async {
    await Future.delayed(const Duration(seconds: 2));
    setState(() {
      _userData = "用户：李四";
    });
  }

  // 其余请求方法类似，这里省略...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("手动管理加载状态")),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : SingleChildScrollView(
              child: Column(
                children: [
                  Text("用户信息：$_userData"),
                  Text("商品数量：${_productList?.length ?? 0}"),
                  Text("订单总数：$_orderCount"),
                  Text("推荐内容：${_recommendations?.join(", ") ?? ""}"),
                ],
              ),
            ),
    );
  }
}

额外注意点 #

• 如果希望单个请求失败不影响其他请求的加载，可以给单个Future添加catchError兜底，比如fetchUserData().catchError((e) => "默认用户")，这样Future.wait()会忽略该请求的错误，继续等待其他请求完成。
• 绝对不要在build方法中直接创建Future，否则每次页面重建都会重新执行异步请求，一定要把Future初始化放在initState或使用状态管理工具缓存。
• 如果需要支持下拉刷新，只需要重新触发合并后的Future或重新调用_loadAllData()方法即可。

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