Flutter 的 FutureBuilder 多次重建

Question

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

考虑以下sn-p：

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: My FutureBuilder Keeps Firing!

Answer 2

如果你想重建一个提供者，那么你可以使用

context.refresh(providerThatYouWantToRebuild);

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

文档位于： 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());

您的 _data 列表与值 null 或 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
              ],
            ),
          ),
        ),
    );
}
}