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

Question

下面我有一个简单的设置来使用 FutureBuilder 演示一个有状态的小部件。 .当Future async调用第一个火灾我们看到 CircularProgressIndicator屏幕上。

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

Future async 函数再次被调用，但这次我们没有看到 CircularProgressIndicator因为 AsyncSnapshot.hasData是真的。

这意味着 AsyncSnapshot.hasData从之前完成的 FutureBuilder 构建中获得它的值(value)。

我怎样才能实现对我的 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.(waiting, done or active)”，在您使用 snapshot.hasData 的情况下，添加一个检查连接的条件状态。这将解决您的问题...

您可以引用此了解详情 https://codinginfinite.com/flutter-future-builder-pagination/