Flutter 如何使搜索结果在颤振中可点击

我在Flatter上制作了一个搜索栏，收集firestorm的数据，现在我希望结果能够显示出来，这样我就可以点击搜索结果并阅读有关搜索的详细信息。

在屏幕截图上你可以看到我搜索“Dbk”，所以现在我想点击它来显示信息。感谢您的帮助，这里有一些代码：

class _MyHomePageState extends State<MyApp> {
                         var queryResultSet = [];
                         var tempSearchStore = [];
                            initiateSearch(value) {
                                if (value.length == 0) {
                                        setState(() {
                                        queryResultSet = [];
                                           tempSearchStore = [];
                                          });
                                         }
    var capitalizedValue =
        value.substring(0, 1).toUpperCase() + value.substring(1);
    if (queryResultSet.length == 0 && value.length == 1) {
      SearchService().searchByName(value).then((QuerySnapshot docs) {
        for (int i = 0; i < docs.documents.length; ++i) {
          queryResultSet.add(docs.documents[i].data);
        }
      });
    } else {
      tempSearchStore = [];
      queryResultSet.forEach((element) {
        if (element['Nom'].startsWith(capitalizedValue)) {
          setState(() {
            tempSearchStore.add(element);
          });
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Find your city'),
        ),
        body: ListView(children: <Widget>[

         Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: (val) {
                initiateSearch(val);
              },
              decoration: InputDecoration(
                  icon: Icon(Icons.search),

                  contentPadding: const EdgeInsets.all(10.0),
                  hintText: 'Recherche',

                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(40.0))),
            ),
          ),
          SizedBox(height: 10.0),
          GridView.count(
              padding: EdgeInsets.only(left: 10.0, right: 10.0),
              crossAxisCount: 2,
              crossAxisSpacing: 4.0,
              mainAxisSpacing: 4.0,
              primary: false,
              shrinkWrap: true,
              children: tempSearchStore.map((element) {
                return buildResultCard(element);
              }).toList())
        ]));
  }
}

Widget buildResultCard(data) {

              return ListTile(
               leading: const Icon(Icons.directions_bus),
                title: Text(data['Nom']),


           );

}

class\u MyHomePageState扩展状态{
var queryResultSet=[]；
var tempSearchStore=[]；
初始搜索（值）{
如果（value.length==0）{
设置状态（）{
queryResultSet=[]；
tempSearchStore=[]；
});
}
var资本化价值=
value.substring（0,1）.toUpperCase（）+value.substring（1）；
if（queryResultSet.length==0&&value.length==1）{
SearchService（）.searchByName（值）。然后（（QuerySnapshot文档）{
对于（int i=0；i

您可以使用

InkWell

小部件为结果项提供手势控制。 只需将生成结果卡的代码替换为：

返回墨水池(
孩子：ListTile(
前导：常量图标（图标、方向和总线），
标题：文本（数据['Nom']），
),
onTap:（）{
//随叫随到
});看起来像是一个内置的手势检测器：

Widget buildResultCard(data) {
    return ListTile(
            leading: const Icon(Icons.directions_bus),
            title: Text(data['Nom']),
            onTap: () {
               print("tapped ${data["Nom"]}")
            }
        );
}