在 Flutter 中搜索后如何导航到详细信息页面

Posted 2023-02-23

【中文标题】在 Flutter 中搜索后如何导航到详细信息页面

【英文标题】：how to navigate to details page after search in Flutter

【发布时间】：2020-08-04 13:50:51

【问题描述】：

我正在学习 Flutter，我正在尝试继续从事这个家伙项目 https://github.com/rajayogan/flutterfirestore-instantsearch/blob/master/lib/main.dart（完整代码），但他没有在搜索后导航到每个详细信息页面的 onTap 或 onPress 功能，所以我想知道如何实现。

这个项目是关于从 firebase 查询数据并在 Flutter 应用上显示的。

任何人都可以快速查看他的代码并帮助我如何创建可以导航到每个详细信息页面的点击功能吗？谢谢

目前的应用是这样的

我的 firebase 数据库中有这些字段，

这是他的Youtube视频教程https://www.youtube.com/watch?v=0szEJiCUtMM&t=198s

【问题讨论】：

我已经上传了我的 firebase 截图。我想在详细信息页面中显示所有信息，如 imageURL、created 和 content。

【参考方案1】：

Widget buildResultCard 包含来自搜索结果的数据，因此您可以将其包装在 Gesture Detector 或 Inkwell 小部件中，然后将其导航到您想要的任何页面。这是我将数据转发到 MyPage 的示例。

Widget buildResultCard(data) 
  return GestureDetector(
    onTap: ()
       Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => MyPage(data: data));
      );
    ,
    child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        elevation: 2.0,
        child: Container(
            child: Center(
                child: Text(data['businessName'],
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20.0,
                  ),
                )
            )
        )
    ),
  );

【讨论】：

您好，感谢您的回答，但我刚刚上传了我的 firebase 图片，所以您能否帮助我在用户点击结果时如何在另一个页面中显示这些信息。谢谢

是的，您只需将这些数据传递到另一个页面，就像我在示例中向您展示的那样，然后将其显示在您拥有的小部件中，例如 Text(widget.data['content'])。

Widget buildResultCard(data) 此方法将数据传递给它，因此您可以进一步将数据传递到另一个页面（您的详细信息页面），然后以与您的 Card Widget 中显示 businessName 相同的方式显示数据.如果您不知道如何将数据传递到另一个页面，请参考 Flutter 文档“将数据发送到新屏幕”