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

Question

我在 flutter 上制作了一个 SearchBar，用于从风暴中收集数据，现在我希望结果能够胜任，以便我可以点击搜索结果并阅读有关搜索的详细信息。 我的应用程序截图

在截图上你可以看到我搜索了“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']),


           );

}

Answer 1

看起来ListTile有一个内置的手势检测器：

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

Answer 2

您可以使用InkWell小部件为您的结果项目提供手势控制。 只需将用于构建结果卡的代码替换为：

 return InkWell( child:ListTile( leading: const Icon(Icons.directions_bus), title: Text(data['Nom']), ), onTap: (){ //do something on tap });