Flutter ListView实现JSON响应数据搜索过滤功能失效问题咨询

核心问题原因 #

你触发过滤调用setState后，组件会重新执行build方法，此时FutureBuilder的builder回调会再次运行，你在回调里每次只要有数据就会把tempDoctorData重置为全量的医生列表，覆盖了过滤后的结果，所以看起来过滤功能没有生效。

额外潜在问题 #

你在FutureBuilder的builder回调中直接修改State类的成员变量是不合理的，builder会随每次build重复执行，不属于单次初始化的逻辑。

修复方案 #

1. 先在State类中声明两个成员变量，分别存储全量原始数据和过滤后的渲染数据：

// 存储接口返回的全量原始医生数据，仅初始化一次
List<Doctor>? allDoctors;
// 存储过滤后用于列表渲染的数据
List<Doctor> filteredDoctors = [];

2. 修改FutureBuilder的builder逻辑，仅在第一次拿到接口数据时初始化全量变量：

else if (snapshot.hasData){
  // 仅当全量变量为空时初始化，避免每次build重复覆盖
  allDoctors ??= snapshot.data as List<Doctor>;
  // 首次加载时过滤列表默认等于全量数据，后续保留过滤结果
  filteredDoctors = filteredDoctors.isEmpty ? List.from(allDoctors!) : filteredDoctors;
  return _buildListView(filteredDoctors);
}

3. 修改过滤函数，基于全量原始数据做过滤：

onItemChanged(String value) {
  setState(() {
    filteredDoctors = allDoctors?.where((element) => 
      element.name.toLowerCase().contains(value.toLowerCase())
    ).toList() ?? [];
  });
}

内容的提问来源于stack exchange，提问作者Ananda Pramono