Flutter 的 FutureBuilder 多次重建

Question

我对 Flutter 比较陌生，目前正在与 FutureBuilders 斗争。 我已经阅读了 Remi 在这个线程上的回答，它基本上说明了 Flutter 的理念，即小部件构建应该是幂等的。 我在理论上得到了原理，但是实际上它是如何工作的呢？

考虑以下代码段：

return Scaffold(
  body: SafeArea(
    child: Stack(
      children: [
        Consumer<DataPresenter>(
            builder: (context, presenter, _) {
              return DefaultFutureBuilder<List<Data>>(
                    future: presenter.data(),
                    builder: (context, data) {
                      // bla bla 
                    }
                );
            }
        ),
        // More widgets
      ],
    ),
  ),
);

}

这是我的DefaultFutureBuilder ：

class DefaultFutureBuilder<T> extends StatelessWidget {
  final Future<T> future;
  final Widget Function(BuildContext, T data) builder;
  final Widget Function(BuildContext) errorBuilder;

  DefaultFutureBuilder({
    @required this.future,
    @required this.builder,
    this.errorBuilder,
  });

  @override
  Widget build(BuildContext context) {
    var errBuilder = errorBuilder ?? _buildDefaultErrorScreen;

    return FutureBuilder<T>(
      future: future,
      builder: (context, snapshot) {
        var indicator = Center(child: CircularProgressIndicator());

        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData)
            return builder(context, snapshot.data);
          else if (snapshot.hasError)
            return errBuilder(context);
        }

        return indicator;
      },
    );
  }

  Widget _buildDefaultErrorScreen(BuildContext context) {
    // default
  }
}

现在我知道对presenter.data()的调用（获取一些异步数据）并不符合犹太教规。 但是我确实想在演示者通知消费者时重新获取数据，同时我不想在 Flutter 由于框架恶作剧而重建我的小部件树时获取它。

我最初的想法是构建演示者，以便它只在目前没有任何数据时获取数据。 然后我可以通过其他方法将数据设置为 null 并通知侦听器重建受影响的小部件子树。
像那样：

class DataPresenter extends ChangeNotifier {
  // fields, services, bla bla
  List<Data> _data; 

  Future<List<Data>> data() async {
    if (_data == null) {
      var response = await _service.fetchMyStuff(params: params);
      _data = response.data;
    }

    return _data;
  }
}

这个解决方案的问题是，当我第一次获取数据时发生的任何重建都会导致另一个请求。

如果有人能指出我没有得到框架/架构的哪一部分，我将不胜感激。

Answer 1

我认为这可能会解决您的问题我遇到这个问题太烦人了您所做的任何事情以及您的应用程序重建。 所以他们解决问题的方法是记住我的未来。 现在，这可能对您有用，也可能不适用。 如果它将Consumer重建视为一个新的未来，那么你会很好，因为如果我理解正确， FutureBuilder将在Consumer执行时重建，这就是你想要的。 这就是你要做的。

//Initialize at top of class
final AsyncMemoizer _memoizer = AsyncMemoizer(); 


 Future<void> _someFuture() {
    return this._memoizer.runOnce(() async {
     //Do your async work
    });
  }

然后_someFuture()将是您传递给FutureBuilder的内容。 这是一篇关于这个问题的好文章。

Flutter：我的 FutureBuilder 一直在开火！

Answer 2

如果要重建提供程序，则可以使用

context.refresh(providerThatYouWantToRebuild);

此方法对于“拉动刷新”或“错误重试”等功能非常有用，可随时重新启动特定提供程序。

Documentation is available at: https://riverpod.dev/docs/concepts/combining_providers#faq https://pub.dev/documentation/riverpod/latest/all/ProviderContainer/refresh.html https://pub.dev/documentation /flutter_riverpod/latest/all/BuildContextX/refresh.html

Answer 3

我会建议一个解决方案，没有 futureBuilder

您在第一次构建无状态小部件后获取数据

WidgetsBinding.instance.addPostFrameCallback((_) => Provider.of<DataPresenter>(context, listen: false).fetchdata());

您的null _data lenght==0存在差异

class DataPresenter extends ChangeNotifier {
  // fields, services, bla bla
  List<Data> _data; 
  // getter for the Consumer
  List<Data> get data => _data;


  Future<List<Data>> fetchdata() async {

     _data = await _service.fetchMyStuff(params: params);
     if (_data == null) 
       _data = new List(); //difference between null and length==0

     //rebuild Consumer
     notifyListeners();

  }
}

没有 FutureBilder 的页面

class ProvPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    // calls after the widget ist build
    WidgetsBinding.instance.addPostFrameCallback((_) => Provider.of<TodoListModel>(context, listen: false).refreshTasks());

    return MultiProvider(
        providers: [
              ChangeNotifierProvider(create: (context) => DataPresenter()),
        ],
        child: Scaffold(
          body: SafeArea(
            child: Stack(
              children: [
                Consumer<DataPresenter>(
                    builder: (context, presenter, _) {

                       //get current Values vom the DataPresenter._data
                       List<Data> currData = presenter.data;

                       // firstime fetch ??
                       if(currData == null)
                         return CircularProgressIndicator();

                       // DataPresenter.getData is finished
                       return new RefreshIndicator(
                           onRefresh: () => presenter.fetchdata(),
                           child: new Text("length " + currData.length.toString())
                       );

                    },
                ),
                // More widgets
              ],
            ),
          ),
        ),
    );
}
}