flutter - Flutter Infinite滚动:如何触发每个滚动一个

Question

我正在构建到Flutter应用程序的导航(Infinity Scroll)，并且从逻辑上成功做到了这一点(滚动更多数据)。

但是我现在面临一个巨大的问题，那就是我正在DDOS攻击我的服务器:“S

当我向下滚动时，我每次上下发送100多个请求!!!

发生这种情况是因为以下代码

final _scrollThreshold = 200;

void _onScroll() {
  final maxScroll = _scrollController.position.maxScrollExtent;
  final currentScroll = _scrollController.position.pixels;
  if (maxScroll - currentScroll <= _scrollThreshold) {
    BlocProvider.of<SearchBloc>(context).add(SearchPosts(
      pageNo: _pageNo++,
      query: _searchText.text
    ));
  }
}

最后一个范围(最后200个像素)中的问题是，如果用户没有移动手，没有等待并继续播放以告知下一页已加载，该功能将持续触发很多

那么如何解决此问题，使其每滚动一个页面仅请求一个(页面)

Answer 1

我遇到过同样的问题。要解决此问题，您应在等待响应时从ScrollController删除_onScroll回调。之后，当接收到数据时，应再次将其添加到ScrollController中。您的_onScroll方法应如下更改:

void _onScroll() {
  final maxScroll = _scrollController.position.maxScrollExtent;
  final currentScroll = _scrollController.position.pixels;
  if (maxScroll - currentScroll <= _scrollThreshold) {
    _scrollController.removeListener(_onScroll);
    BlocProvider.of<SearchBloc>(context).add(SearchPosts(
      pageNo: _pageNo++,
      query: _searchText.text
    ));
  }
}

并且不要忘记在收到数据后再次添加它。
但是，我意识到当用户快速滚动时，可以两次调用此方法。为了解决这个问题，我在bloc类中使用了RxDart并将其transformEvents方法重写为如下所示:

  @override
  Stream<S> transformEvents(
      Stream<E> events, Stream<S> Function(E) next) {
    return super.transformEvents(
      events.debounceTime(
        Duration(milliseconds: 300),
      ),
      next,
    );
  }

祝好运