listview - Flutter ListView.builder() 动态列表 - 显示无限重复的条目

Question

我有一个很大的 ~5K 项目列表。

我想做的是为这些项目编写一个搜索 View 。

我尝试了以下 -

   List<String> items;
   String query;

   ListView.builder(
    itemBuilder: (context, index) {
      for (int i = index; i < items.length; i++) {
        var item = items[i];
        if (item.contains(query)) {
          return ItemTile(item);
        }
      }
    }

这会高效地呈现和搜索元素，但问题是它最终会无限地重复列表中的最后一项。

我想那是因为我没有提供 itemCount。

---

所以我尝试在 Stateful Widget 中自己跟踪过滤项目的数量。

   var _count = 1;

   _queryController.addListener(() {
      setState(() => _count = 1);
   });

   ListView.builder(
    itemBuilder: (context, index) {
      for (int i = index; i < items.length; i++) {
        var item = items[i];
        if (item.contains(query)) {
          setState(() => _count += 1);
          return ItemTile(item);
        }
     }
     itemCount: _count;
   }

但随后我收到一个错误，说 - setState() 或 markNeedsBuild() 在构建期间调用。

如果不为每个查询完全搜索项目，那么正确的方法是什么？

(我的目标是实现按类型搜索用户体验)

Answer 1

您可以在将列表传递给构建器之前尝试过滤列表。

List<String> items;
List<String> _queryResults;
String query;

_queryResults = items.where((item) => item.contains(query)).toList();

然后可以将其传递给 ListView.builder，而无需一遍又一遍地设置状态。不确定与其他选项相比它的性能如何，应该不会有太大差异，因为在大多数情况下过滤列表可能会很短。它比在构建器中进行过滤和设置状态要干净得多，所以我至少会测试一下。

此外，如果您要使用“键入时搜索”解决方案，则应该对过滤进行去抖动处理，这意味着您在每次输入后等待 500 毫秒或某个合适的持续时间，以查看用户在执行过滤之前是否键入更多内容.将为您节省很多不必要的电话，并使您的解决方案性能更好。