Question

我在flutter上制作了一个搜索栏，用于从Firestore收集数据，现在我希望结果是可点击的，这样我就可以点击搜索结果并阅读有关搜索的详细信息。 Screenshot of my app

在屏幕截图上，您可以看到我搜索“ 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
           });

如何在Flutter上轻按搜索结果

2 个答案: