Flutter中ListView.builder如何仅显示符合指定条件的条目？

你的问题核心在于ListView.builder的itemCount是API返回的全部宝可梦数量，所以每个索引都会生成一个列表项——符合条件的显示目标文本，不符合的显示错误文本，最终导致所有条目都被展示。要只显示匹配的那一个，关键是先筛选出符合条件的数据，再基于筛选后的列表构建视图。

修改步骤： #

1. 先过滤出与widget.pokemon.name匹配的宝可梦条目
2. 基于过滤后的列表构建ListView，此时itemCount就是匹配条目的数量（最多1个）

修改后的完整代码： #

// 在build方法内先过滤数据
final filteredPokemon = dataFromAPI!.pokemon.where((p) => p.name == widget.pokemon.name).toList();

return _isLoading
    ? const Center(
        child: CircularProgressIndicator(),
      )
    : ListView.builder(
        itemBuilder: (context, index) {
          return const Center(child: Text("This is the pokemon!"),);
        },
        itemCount: filteredPokemon.length,
      );

补充说明： #

• 使用where方法过滤后转成列表，只会保留匹配的条目，ListView只会渲染符合条件的项，不会再出现错误文本
• 如果API返回的列表中存在多个同名宝可梦，这个方法会全部显示；如果确定只有一个匹配项，就只会展示那一个条目

内容的提问来源于stack exchange，提问作者Mathias Van Langendonck