在 Flutter 中为 SliverList 添加搜索功能答案

【问题标题】：Adding Search function to SliverList in Flutter在 Flutter 中为 SliverList 添加搜索功能
【发布时间】：2021-04-17 01:48:25
【问题描述】：

我正在尝试向包含多个列表项的 SliverList 添加搜索功能。

就在遍历我的元素列表之前，我添加了 TextField 来实现搜索功能本身。

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextField(
    onChanged: (value) {
      filterSearchResults(value);
    },
    controller: editingController,
    decoration: InputDecoration(
      labelText: "Search",
      hintText: "Animal Name",
      prefixIcon: Icon(Icons.search),
      border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(4.0))),
    ),
  ),
),


for (var animal in response)
  Card( /* Elements to be searched later */)

至于fluterSearchResults函数：

void filterSearchResults(String query) {
  List response = widget.res; // <- contains the animal data I'd like to search through

  List<String> searchList = List<String>();

  if (query.isNotEmpty) {
    searchList.forEach((response) {
      if (response.contains(query)) {
        searchList.add(response);
      }

      setState(() {
        items.clear();
        items.addAll(searchList);
      });
    });

    return;
  } else {
    setState(() {
      items.clear();
      items.addAll(searchList);
    });
  }
}

widget.res 中的一个数据元素如下所示：

[{
    id: 1,
    game: "basegame",
    name: "Aardvark",
    continent: [
        "Africa"
    ],
    biome: [
        "Grassland",
        "Tropical"
    ],
    can_swim: true,
    status: "Least Concern",
    exhibit: false,
    dominance: "None",
    relationship_human: "Shy",
    mating_system: "Polygynous"
}]

只要查询不为空，我的函数似乎没有将元素正确添加到我想显示的搜索列表中，但我无法在此处找到问题。

【问题讨论】：

标签： flutter flutter-sliver

【解决方案1】：

fluterSearchResults 函数的一部分是导致错误的原因。您使用相同的列表进行搜索，[searchList]。它总是在一个空列表中搜索。试试

      List responseList = widget.res; 
      List<String> searchList = List<String>();
    
        responseList.forEach((response) {
          if (response.contains(query)) {
            searchList.add(response);
          }
    
          setState(() {
            items.clear();
            items.addAll(searchList);
          });
        });
    
        return;

希望问题能解决。

【讨论】：