Flutter：为什么这个 streambuilder 不起作用？

Question

所以，我刚刚开始做一个 flutter 项目，对整个体验还很陌生。我刚刚通过创建几个更新、删除和添加文档的按钮，设法将 firebase firestore 集成到我的项目中。但是，我还想添加一个 Streambuilder，其中包含正在同一页面上更新的列表。我分别尝试了每项任务，它们都工作得很好而且很漂亮，但是当我将两者结合起来时，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());
    }
  }
}

Answer 1

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

import 'package:flutter/material.dart';

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

void main() => runApp(new MediaQuery( 数据：new MediaQueryData(), child: new 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
);

Flutter：为什么这个 streambuilder 不起作用？

Flutter: Why doesn't this streambuilder work?

firebase

flutter

google-cloud-firestore

stream-builder