flutter - Flutter FutureBuilder – 当小部件在异步函数中构建时，进度指示器不显示

Question

我是 Flutter 的新手，这是我在 Stackoverflow 上的第一个问题。如果我需要为我的问题提供更多上下文或详细信息，请告诉我。

在我的应用程序中，用户可以导航到具有两级嵌套列表小部件的页面。当最底层的列表超过 20 条时，Flutter 需要几秒钟的时间来渲染它，然后页面被 Navigator 推送并显示给用户，这让应用程序有瞬间冻结的感觉，这是我非常不喜欢的。

我尝试使用 FutureBuilder 在异步函数中构建小部件树，并在构建小部件时显示 CircularProgressIndicator。但是，它不起作用，future builder 只是等待连接状态完成并且不显示进度指示器。下面是复制问题的简化代码——构建小部件时没有显示进度指示器。我需要使用 List.builder 中的 cacheExtent 属性来提高滚动平滑度，因为列表中的每个项目都有文本字段和 inkWell，这会在不使用缓存范围时导致滚动延迟。我在这里不需要延迟加载，因为列表长度是固定的并且不是那么大。但是，我可以看到未来的构建器问题与缓存范围无关。

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: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Future<Widget> _buildFutureWidget() async {
    List<Widget> list = List.generate(
        1000, (index) => Text('List item #' + (index + 1).toString()));
    return Scaffold(
      body: ListView.builder(
        itemCount: list.length,
        cacheExtent: 999999999999999,
        itemBuilder: (context, i) {
          print('Building item ${list[i]}');
          return ListTile(title: list[i]);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Widget>(
      future: _buildFutureWidget(),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.active:
          case ConnectionState.none:
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());
          default:
            if (snapshot.hasError)
              return Text('Error: ${snapshot.error}');
            else
              return snapshot.data;
        }
      },
    );
  }
}

您能否帮我找出我的代码出了什么问题以及如何在构建小部件时显示进度指示器？

非常感谢任何见解！

标签： flutterflutter-futurebuilder