找出 ListView 中的哪些项目是可见的答案

【问题标题】：Find out which items in a ListView are visible找出 ListView 中的哪些项目是可见的
【发布时间】：2019-11-22 12:04:06
【问题描述】：

如何在ListView 中找出当前是visible 或invisible 的项目？
例如，我在ListView 中有 100 个项目，当我滚动到屏幕或列表顶部时，我想检测哪些项目出现在视口中或从视口中消失。

插图：

【问题讨论】：

你为什么想知道？如果您要创建一个包含 100 个项目的列表，您应该使用 ListView.builder 女巫您可以传递一个 itemBuilder，这将在您的 listView 中构建一行的“小部件”。所以颤振会设法让你的女巫线是可见的并渲染它，并从记忆中清除那些不可见的......
是的，我知道颤振可以做到这一点。我想使用这个功能来使用另一个听众来使用它

标签： flutter dart flutter-layout flutter-listview

【解决方案1】：

没有简单的方法可以做到这一点。 Here 是同一个问题，但是没有答案。

关于这个有一个活跃的GitHub issue。

该问题有多种解决方案。这个Gist 具有一个需要rect_getter package 的功能。
或者，您可以查看this proposal。

TL;DR

如果您正在寻找一种简单的方法来找到它，这还没有实现。但是，有一些解决方案，比如我上面提到的那些以及来自其他包的解决方案，比如来自flutter_widgets 的VisibilityDetector。

【讨论】：

现在有一个简单的方法可以做到这一点，检查这个答案：stackoverflow.com/a/57252652/11246031
@LukasSchneider 感谢您的提及！
谢谢你们，卢卡斯的回答似乎也是一个很好的解决方案！

【解决方案2】：

为此目的有一个package。

VisibilityDetector 小部件包装现有的 Flutter 小部件，并在小部件的可见性发生变化时触发回调。

用法：

VisibilityDetector(
    key: Key('my-widget-key'),
    onVisibilityChanged: (visibilityInfo) {
      var visiblePercentage = visibilityInfo.visibleFraction * 100;
      debugPrint(
          'Widget ${visibilityInfo.key} is ${visiblePercentage}% visible');
    },
    child: someOtherWidget,
  )

【讨论】：

【解决方案3】：

您也可以使用inview_notifier_list。它基本上是一个普通的 ListView，它定义了一个可见区域，并且它的孩子在该区域内时会收到通知。

【讨论】：

那里的例子甚至不起作用......我正在使用flutter v2.8