Question

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

“未来”完成后，我们看到包含刷新FlatButton的UI，当按下setState来重绘窗口小部件时。

再次调用Future异步功能，但这一次我们没有看到CircularProgressIndicator，因为AsyncSnapshot.hasData是真实的。

这意味着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。（等待，完成或活动）”。hasData还可以添加一个条件用于检查连接状态。这将解决您的问题...

您可以将其引荐给https://codinginfinite.com/flutter-future-builder-pagination/

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

1 个答案: