在 flutter 中使用 StreamBuilder 时将数据传递到下一个屏幕

Question

我能够从 Card 小部件内的 firestore 获取数据，但无法详细说明 - 我的意思是将快照从第一个屏幕传递到第二个屏幕（从 BodySectionStream 页面到 DetailPage）。我尝试了很多但都失败了。请查看我的代码并帮助我解决问题。提前致谢

class BodySectionStream extends StatefulWidget {

  @override
  _BodySectionStreamState createState() => _BodySectionStreamState();
}

class _BodySectionStreamState extends State<BodySectionStream> {

  final firestore = Firestore.instance;



  navigateToDetail( AsyncSnapshot post) {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => DetailPage(
                  news: post,
                )));
  }


  @override
  Widget build(BuildContext context) {


    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        child: Column(
          children: <Widget>[
            Align(
              alignment: Alignment.centerLeft,
              child: Container(child:
              Text('Prefernces', textAlign: TextAlign.left, style: TextStyle(
                fontWeight: FontWeight.w500, fontSize: 22.0, color: Colors.black),)),
            ),

            const SizedBox(height:10.0),

            StreamBuilder <QuerySnapshot>(
                stream: firestore.collection('news').snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return Center (child: CircularProgressIndicator());
                  } 
                  else {
                    final posts = snapshot.data.documents;
                    List<Container> postWidgets = [];
                    for (var post in posts ){
                      final postText = post.data['title'];
                      final postList = Container(
                      child:  GestureDetector(
                        onTap: () => navigateToDetail( post.data[index]),
                          child: Card(

                          child: Column(children: <Widget>[
                            Image.network(post.data['images'],),
                            Text(postText),
                          ],)
                        ),
                      )
                      );


                      postWidgets.add(postList);

                    }
                    return Expanded(
                      child: ListView(
                        children: postWidgets,
                        ));
                  }
                }),

          ],
        ),
      ),
    );
  }
}

DetailPage - 我想传递数据的地方

class DetailPage extends StatefulWidget {
  final AsyncSnapshot news;

  DetailPage({this.news});

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
         children: <Widget>[
           Text(widget.news.data['title'])
         ],
        ),
      ),
    );
  }
}

Answer 1

final posts = snapshot.data.documents;

documents getter returns 类型 DocumentSnapshot 的 List，您正在此处传递 DetailPage 文档字段：

onTap: () => navigateToDetail( post.data[index]),

但是你想通过一个DocumentSnapshot来访问DetailPage中的title字段，所以只需要通过post:

onTap: () => navigateToDetail(post),

并在 DetailPage class.

中将 news 数据类型从 AsyncSnapshot 更改为 DocumentSnapshot

在 flutter 中使用 StreamBuilder 时将数据传递到下一个屏幕

Passing data to the next screen while using StreamBuilder in flutter

flutter

google-cloud-firestore

stream-builder