Flutter 滚动控制器无限滚动在较大屏幕尺寸上失败

Question

我在颤动中遇到无限滚动的问题，我每页加载六个项目，并在滚动时加载更多项目，这在较小的屏幕尺寸下完美运行，但当我使用较大屏幕尺寸的模拟器时，问题就出现了屏幕尺寸较大，然后前六个项目不会填满屏幕，因此我无法滚动以加载其他项目。

有人知道我该如何解决这个问题吗？

谢谢

Answer 1

您可以使用ListView.builder。 ListView.builder 构造函数采用 IndexedWidgetBuilder，它根据需要构建子级。此构造函数适用于具有大量（或无限）子级的列表视图，因为仅为那些实际可见的子级调用构建器。

return ListView.builder(
  padding: const EdgeInsets.all(10.0),
  itemBuilder: (context, i) {
    if (i.isOdd) return const Divider();

    final index = i ~/ 2; 
    if (index >= _listItems.length) {
      _listItems.addAll(_newItems); //load more items here
    }
    return yourWidget(_listItems[index]);
  },
);

这样就不需要使用scrollController了。您可以参考此codelab了解更多信息。

Answer 2

这个已经很旧了，但是如果其他人遇到这个，这应该仍然有帮助。当初始加载没有填满屏幕并且没有滚动时，无限加载失败。缓解这种情况的一种方法是使用 postFramecallback，如下所示。

WidgetsBinding.instance.addPostFrameCallback((_) {
  if (_scrollController.position.maxScrollExtent <=
      _scrollController.position.viewportDimension) {
    _loadMoreItems();
  }
});