SearchDelagate 显示重复结果答案

【问题标题】：SearchDelagate displaying duplicate resultsSearchDelagate 显示重复结果
【发布时间】：2021-08-09 20:27:42
【问题描述】：

我正在使用搜索委托来实现搜索功能。使用 API 获取数据，一切似乎都正常，唯一的问题是每次我输入一个字母时，列表似乎都会重建并显示重复的结果。

下面是搜索委托类的代码。

您的所有帮助都将非常有用。提前致谢。

  class SearchBar extends SearchDelegate {
  List<LeadModel> names = [];
  List recentSearch = [];

  getNames() async {
    http
        .get(
      Uri.https('jsonplaceholder.typicode.com', 'users'),
    )
        .then((data) {
      return json.decode(data.body);
    }).then((data) {
      for (var json in data) {
        names.add(LeadModel.fromJson(json));
      }
      print(names.length);
    }).catchError((e) {
      print(e);
    });
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          onPressed: () {
            query = '';
          },
          icon: Icon(Icons.clear))
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        onPressed: () {
          close(context, '');
        },
        icon: Icon(Icons.arrow_back));
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestions = names.where((name) {
      return name.name.toLowerCase().contains(query.toLowerCase());
    });
    return FutureBuilder(
      future: getNames(),
      builder: (context, snapshot) {
        if (query.isEmpty) return Center(child: Text(""));
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: Text(""));
          default:
            if (snapshot.hasError) {
              return Center(child: Text(""));
            } else {
              names.clear();
              return ListView.builder(
                itemCount: suggestions.length,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text(suggestions.elementAt(i).name),
                  );
                },
              );
            }
        }
      },
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

在您的 getNames 函数中，在添加项目之前清除列表 names，如下所示：

getNames() async {
   
   names.clear();
   
   await http
        .get(
      Uri.https('jsonplaceholder.typicode.com', 'users'),
    )

【讨论】：

这样做会将列表计数重置为 10，但不会显示任何搜索结果。
在http.get之前添加等待。
不客气，请考虑将其标记为您问题的答案，谢谢！

【解决方案2】：

在@Huthaifa Muayyad 的帮助下修复了它，工作代码是

class SearchBar extends SearchDelegate {
  List<LeadModel> names = [];
  List recentSearch = [];

  getNames() async {
    names.clear();
    await http
        .get(
      Uri.https('jsonplaceholder.typicode.com', 'users'),
    )
        .then((data) {
      return json.decode(data.body);
    }).then((data) {
      for (var json in data) {
        names.add(LeadModel.fromJson(json));
      }
      print(names.length);
    }).catchError((e) {
      print(e);
    });
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          onPressed: () {
            query = '';
          },
          icon: Icon(Icons.clear))
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        onPressed: () {
          close(context, '');
        },
        icon: Icon(Icons.arrow_back));
  }

  @override
  Widget buildResults(BuildContext context) {
    return Container();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestions = names.where((name) {
      return name.name.toLowerCase().contains(query.toLowerCase());
    });
    return FutureBuilder(
      future: getNames(),
      builder: (context, snapshot) {
        if (query.isEmpty) return Center(child: Text(""));
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: Text(""));
          default:
            if (snapshot.hasError) {
              return Center(child: Text(""));
            } else {
              return ListView.builder(
                itemCount: suggestions.length,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text(suggestions.elementAt(i).name),
                  );
                },
              );
            }
        }
      },
    );
  }
}

【讨论】：