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

Posted 2023-02-23

【中文标题】在颤动中使用 StreamBuilder 时将数据传递到下一个屏幕

【英文标题】：Passing data to the next screen while using StreamBuilder in flutter

【发布时间】：2020-07-26 07:27:58

【问题描述】：

我能够从 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'])
         ],
        ),
      ),
    );
  

【参考方案1】：

final posts = snapshot.data.documents;

documents getter 返回一个List 类型的DocumentSnapshot，你在这里传递你的DetailPage 一个文档字段：

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

但是你想传递一个DocumentSnapshot 来访问DetailPage 中的title 字段，所以只需传递post：

onTap: () => navigateToDetail(post),

并在 DetailPage 类中将 news 数据类型从 AsyncSnapshot 更改为 DocumentSnapshot。

【讨论】：

我花了将近 4 个小时来解决这个问题，而您在 5 分钟内完成了。万分感谢。完美运行。再次感谢