Flutter FutureBuilder问题：异步构建Widget时进度指示器无法显示

你的问题核心有两个关键点：

• 加载指示器不显示：你写的_buildFutureWidget虽然标记了async，但里面没有任何真正的异步操作（没有await），这个Future会瞬间完成，CircularProgressIndicator根本没机会渲染。而且Widget的构建必须在主线程执行，你把生成大量Widget的逻辑塞到async函数里，本质还是同步阻塞主线程，导致UI直接冻结。
• 页面推送时卡顿：你设置了超大的cacheExtent，这会强制ListView一次性构建并渲染所有列表项（哪怕有上千个），直接占满主线程资源，造成明显的卡顿。

1. 先让加载指示器正常工作：分离数据准备与Widget构建 #

Widget不能在后台线程创建，但你可以把数据准备工作放到隔离线程，等数据就绪后再在主线程构建Widget。这样主线程不会被阻塞，加载指示器就能正常显示。

用Flutter自带的compute函数就能轻松把耗时的数据生成任务放到后台：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // 模拟导航触发按钮
          child: ElevatedButton(
            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => MyListPage())),
            child: Text('打开嵌套列表页'),
          ),
        ),
      ),
    );
  }
}

class MyListPage extends StatefulWidget {
  @override
  _MyListPageState createState() => _MyListPageState();
}

class _MyListPageState extends State<MyListPage> {
  // 后台生成列表数据（仅处理纯数据，不构建Widget）
  Future<List<String>> _fetchListData() async {
    return compute(_generateListData, 1000);
  }

  // 这个函数会在隔离线程执行，不能访问主线程资源
  static List<String> _generateListData(int itemCount) {
    return List.generate(itemCount, (index) => 'List item #${index + 1}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('嵌套列表')),
      body: FutureBuilder<List<String>>(
        future: _fetchListData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 数据准备中，显示加载指示器
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          } else {
            // 数据就绪后再构建列表
            return ListView.builder(
              itemCount: snapshot.data!.length,
              // 建议设置合理的cacheExtent，比如屏幕高度的2-3倍，而非无限大
              cacheExtent: MediaQuery.of(context).size.height * 2,
              itemBuilder: (context, index) {
                return ListTile(title: Text(snapshot.data![index]));
              },
            );
          }
        },
      ),
    );
  }
}

2. 优化滚动流畅度：避免一次性构建所有item #

你设置超大cacheExtent的初衷是解决滚动卡顿，但这反而引发了初始化卡顿。正确的优化方向应该是：

• 轻量化列表项：确保列表项Widget尽可能简洁，能用const构造函数就用，不要在itemBuilder里执行计算、解析等耗时操作。
• 合理设置cacheExtent：默认值已经能应对大部分场景，若需要预加载更多内容，设置为屏幕高度的2-3倍即可，不要设为无限大。
• 坚持用ListView.builder：它是按需构建item的，只有当item进入视口（或cacheExtent范围）时才会构建，能大幅减少初始化时的内存占用和构建时间。

3. 进阶优化：提前预加载数据 #

如果用户导航到列表页的操作是可预测的（比如用户会点击某个按钮），你可以在用户触发导航前就开始准备数据，进一步缩短页面加载等待时间：

class _MyAppState extends State<MyApp> {
  Future<List<String>>? _preloadedData;

  @override
  void initState() {
    super.initState();
    // 页面初始化时就预加载数据
    _preloadedData = compute(_generateListData, 1000);
  }

  static List<String> _generateListData(int itemCount) {
    return List.generate(itemCount, (index) => 'List item #${index + 1}');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => MyListPage(preloadedData: _preloadedData!),
              ),
            ),
            child: Text('打开列表页面'),
          ),
        ),
      ),
    );
  }
}

// 修改MyListPage接收预加载的Future
class MyListPage extends StatefulWidget {
  final Future<List<String>> preloadedData;

  const MyListPage({required this.preloadedData, Key? key}) : super(key: key);

  @override
  _MyListPageState createState() => _MyListPageState();
}

class _MyListPageState extends State<MyListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('嵌套列表')),
      body: FutureBuilder<List<String>>(
        future: widget.preloadedData,
        builder: (context, snapshot) {
          // 复用之前的builder逻辑
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              cacheExtent: MediaQuery.of(context).size.height * 2,
              itemBuilder: (context, index) {
                return ListTile(title: Text(snapshot.data![index]));
              },
            );
          }
        },
      ),
    );
  }
}

• 不要在FutureBuilder里同步构建大量Widget，而是把数据准备放到后台线程，再在主线程构建UI。
• 抛弃超大cacheExtent的思路，改用按需构建和轻量化列表项的方式提升滚动流畅度。
• 预加载数据能进一步优化用户的等待体验。

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