Flutter、Dart、Firestore：如何将从 firestore 检索到的用户数据发送到不同的屏幕？

Question

我有一个屏幕，其中显示了用户列表，使用流生成器从 firestore 检索用户数据。

StreamBuilder(
                  stream: Collection
                      .where('WorkType', isEqualTo: widget.worktype)
                      .snapshots(),
                  builder: (context, AsyncSnapshot snapshot) {
                    
                    if (snapshot.hasData) {
                      return Container(
                        height: 600,
                        child: ListView.builder(
                            itemCount: snapshot.data.docs.length,
                            itemBuilder: (context, index) {
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Container(
                                  height: 100,
                                  child: GestureDetector(
                                    onTap: () {
                                      //Navigate to Screen two
                                    },
                                    child: Card(
                                      child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                                snapshot.data.docs[index].data()['Name'],
                                                style: kRobotoSlab.copyWith(
                                                    fontSize: 20)),
                                            Text(
                                              snapshot.data.docs[index]
                                                  .data()['Address'],
                                              style: kRobotoSlab.copyWith(
                                                  fontSize: 15),
                                            ),
                                            Text(
                                              snapshot.data.docs[index]
                                                  .data()['Phone Number'],
                                              style: kRobotoSlab.copyWith(
                                                  fontSize: 15),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }),
                      );
                    } else if (snapshot.hasError) {
                      return Text(snapshot.error.toString());
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),

我希望一旦用户点击卡片，它将导航到屏幕 2，该屏幕将显示用户个人资料以及从 firestore 检索到的数据

例如Card 1 : Name => Samia Address=> USA Number=> 4659848668 用户将按下它，它将导航到带有 Samia 信息的屏幕 2。

我怎样才能实现它？

Answer 1

假设您调用新屏幕 DetailScreen，您应该让它获取一个最好是您想要在其中显示的项目的对象的 Map，例如：

在DetailScreen 定义中，您可以：

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Item.
  final User user;

  // In the constructor, require a user.
  DetailScreen({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(user.address),
      ),
    );
  }
}

然后在您的GestureDetector onTap 方法中，您可以执行以下操作：

  Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(user: users[index]),
          ),
        );

由于您没有使用上面示例中的模型，因此您可以让第二个屏幕接受 Map 字段，然后在导航到它时传入 snapshot.data.docs[index].data() 作为值。

所以现在变成这样：

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Item.
  final Map user;

  // In the constructor, require a user map.
  DetailScreen({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(user['Name']),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(user['Address']),
      ),
    );
  }
}

在导航时，您只需执行 导航器.push( 语境， MaterialPageRoute( builder: (context) => DetailScreen(user: snapshot.data.docs[index].data()), ), );