如何为每个异步调用 FutureBuilder 显示进度指示器

Question

下面我有一个简单的设置来演示使用FutureBuilder. 当Future async呼叫第一次触发时，我们会CircularProgressIndicator在屏幕上看到 。

Future 完成后，我们会看到包含刷新的 UI FlatButton，按下时setState会调用以重绘小部件。

Future 异步函数再次被调用，但这次我们看不到，CircularProgressIndicator因为它AsyncSnapshot.hasData是 true。

这意味着AsyncSnapshot.hasData它具有先前已完成的 FutureBuilder 构建的价值。

如何实现 UI 小部件的“纯粹”刷新/清除，以便我CircularProgressIndicator在每个异步数据调用上显示并按下调用的每个刷新按钮setState？

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

class DemoFutureBuilder extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DemoFutureBuilder();
}

class _DemoFutureBuilder extends State<DemoFutureBuilder> {
  var _displayText = 'Hello World';

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: helloWorldAsync(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            print('=============== Snapshot no data ==========');
            return CircularProgressIndicator();
          }

          print('=============== Snapshot has data ==========');
          return Column(
            children: <Widget>[
              Text(snapshot.data),
              Padding(
                padding: EdgeInsets.only(top: 20),
                child: FlatButton(
                  child: Text('Pure & Clean Refresh'),
                  onPressed: () {
                    setState(() {
                      _displayText = 'Goodbye Cruel World';
                    });
                  },
                ),
              )
            ],
          );
        });
  }

  Future<String> helloWorldAsync() async {
    return Future<String>.delayed(Duration(seconds: 3)).then((_) {
      return _displayText;
    });
  }
}

Answer 1

我也遇到了同样的问题，我已经使用“snapshot.connectionState”解决了它，您可以将其检查为“ConnectionState。（等待，完成或活动）”在您使用 snapshot.hasData 的情况下添加一个检查连接的条件状态。这将解决你的问题...

您可以参考此详细信息https://codinginfinite.com/flutter-future-builder-pagination/