Flutter搜索栏问题：清除文本无法恢复原始数据

云上老周

2026-8-1

问题分析与解决方案

问题根源

你当前的实现直接修改了展示用的数据源displayProduct，每次搜索都会将其替换为过滤后的子集。当清空搜索文本时，你是基于已经被过滤过的displayProduct去筛选空字符串，原始全量数据已经丢失，因此无法恢复初始状态，再次搜索也没有完整数据可供筛选。

解决方案

需要保留一份原始全量数据的副本，每次搜索都基于这份副本进行过滤，而非修改展示用的数据源。

步骤1：添加全量数据变量

在你的State类中新增一个变量用于存储原始全量数据：

// 替换成你的实际Model类型
List<ProductModel>? allProducts;

步骤2：初始化数据

在获取JSON解析后的全量数据时，同时赋值给allProducts和displayProduct（比如在initState或数据加载完成后）：

@override
void initState() {
  super.initState();
  // 假设parsedProductsFromJson是你从JSON解析得到的全量数据
  allProducts = parsedProductsFromJson;
  displayProduct = allProducts; // 初始展示全量数据
}

步骤3：修改搜索过滤函数

修改searchProduct，基于原始全量数据进行过滤，并处理空搜索的情况：

void searchProduct(String query) {
  if (query.isEmpty) {
    // 清空搜索时直接恢复全量数据
    setState(() {
      displayProduct = allProducts;
    });
    return;
  }

  final response = allProducts?.where((element) {
    // 处理title为null的情况，避免空指针异常
    final titleProduct = element.title?.toLowerCase() ?? '';
    final input = query.toLowerCase();
    return titleProduct.contains(input);
  }).toList();

  setState(() {
    displayProduct = response;
  });
}