Flutter：为啥这个流构建器不起作用？

Posted 2023-02-23

【中文标题】Flutter：为啥这个流构建器不起作用？

【英文标题】：Flutter: Why doesn't this streambuilder work?Flutter：为什么这个流构建器不起作用？

【发布时间】：2020-09-01 22:46:11

【问题描述】：

所以，我刚刚开始从事 Flutter 项目，对整个体验还很陌生。我只是通过创建一些更新、删除和添加文档的按钮来设法将 firebase firestore 集成到我的项目中。但是，我还想在同一页面上添加一个带有正在更新的列表的 Streambuilder。我分别尝试了每个任务，它们都工作得很好而且花花公子，但是当我将两者结合起来时，streambuilder 不显示任何数据并且按钮不会单击。如何将按钮和 Streambuilder 合并到一个正文或一个页面中？在小部件构建方法中如何将这两个元素组合到一个页面上？同样，如果我在正文中使用 Streambuilder 而不是子小部件标签，这两个元素本身似乎可以正常工作。

无法正常工作的页面的图片。注意当鼠标悬停在上面时按钮没有被选中并且流构建器无限加载：https://i.stack.imgur.com/XnfVJ.png Firebase 数据截图（安全设置允许用户访问数据）：https://i.stack.imgur.com/oSsOL.png

这是我的 main.dart 代码：

  final databaseReference = Firestore.instance;
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('FireStore Demo'),
      ),
      body: Center(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,

        children: <Widget>[

          RaisedButton(
            child: Text('Create Record'),
            onPressed: () 
              createRecord();
            ,
          ),
          RaisedButton(
            child: Text('View Record'),
            onPressed: () 
              getData();
            ,
          ),
          RaisedButton(
            child: Text('Update Record'),
            onPressed: () 
              updateData();
            ,
          ),
          RaisedButton(
            child: Text('Delete Record'),
            onPressed: () 
              deleteData();
            ,
          ),
          StreamBuilder<QuerySnapshot>(
        stream: databaseReference.collection('books').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) 
          if (!snapshot.hasData) return new Text('Loading...');
          return new ListView(
            children: snapshot.data.documents.map((DocumentSnapshot document) 
              return new ListTile(
                title: new Text(document['title']),
                subtitle: new Text('$document['description'] description'),
              );
            ).toList(),
          );
        ,
      )
        ],
      )),
       //center
    );
  

  void createRecord() async 
    await databaseReference.collection("books")
        .document("1")
        .setData(
          'title': 'Mastering Flutter',
          'description': 'Programming Guide for Dart'
        );

    DocumentReference ref = await databaseReference.collection("books")
        .add(
          'title': 'Flutter in Action',
          'description': 'Complete Programming Guide to learn Flutter'
        );
    print(ref.documentID);
  

  void getData() 
    databaseReference
        .collection("books")
        .getDocuments()
        .then((QuerySnapshot snapshot) 
      snapshot.documents.forEach((f) => print('$f.data'));
    );
  

  void updateData() 
    try 
      databaseReference
          .collection('books')
          .document('1')
          .updateData('description': 'Head First Flutter');
     catch (e) 
      print(e.toString());
    
  

  void deleteData() 
    try 
      databaseReference
          .collection('books')
          .document('1')
          .delete();
     catch (e) 
      print(e.toString());
    
  

【问题讨论】：

在if(!snapshot.hasData)上运行放断点并在调试模式下运行以检查它是否正在运行。

它不工作或者它没有在你的构建器中显示新数据？我之所以这么问，是因为我在您的函数中没有看到任何 setstate。

也尝试将StreamBuilder 放入Container 作为子元素。

构建器中没有显示任何数据，并且按钮似乎不起作用

如果您只在正文中使用 StreamBuilder 而不在此页面上使用按钮，它是否有效？

【参考方案1】：

仍然不知道为什么上面的代码不起作用，但是将流构建器放在 Expanded 块中似乎可以解决问题！到目前为止，这两个小部件都运行良好。

import 'package:flutter/material.dart';

导入'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(new MediaQuery( 数据：新 MediaQueryData()，子：新 MaterialApp(home: new MyApp())));

      child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,

    children: <Widget>[

      RaisedButton(
        child: Text('Create Record'),
        onPressed: () 
          createRecord();
        ,
      ),
      RaisedButton(
        child: Text('View Record'),
        onPressed: () 
          getData();
        ,
      ),
      RaisedButton(
        child: Text('Update Record'),
        onPressed: () 
          updateData();
        ,
      ),
      RaisedButton(
        child: Text('Delete Record'),
        onPressed: () 
          deleteData();
        ,
      ),
  new Expanded(child:
    new StreamBuilder<QuerySnapshot>(
    stream: databaseReference.collection('books').snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) 
      if (!snapshot.hasData) return new Text('Loading...');
      return new ListView(
        children: snapshot.data.documents.map((DocumentSnapshot document) 
          return new ListTile(
            title: new Text(document['title']),
            subtitle: new Text('$document['description'] description'),
          );
        ).toList(),
      );
    ,
    )
  )
    ],
  )),
   //center
);