Flutter:为什么这个streambuilder不能正常工作? [英] Flutter: Why doesn't this streambuilder work?

问题描述

因此，我才刚刚开始进行一个扑扑的项目，并且对整个体验来说是个新手.我只是通过创建一些按钮来更新，删除和添加文档，从而将Firebase Firestore集成到我的项目中.但是，我还想添加一个Streambuilder，其中包含要在同一页面上更新的列表.我分别尝试了每个任务，它们都正常工作，但当我将两者结合在一起时，streambuilder不会显示任何数据，并且按钮也不会单击.如何在一个主体或一页中同时包含按钮和Streambuilder?如何在小部件构建方法中将这两个元素组合到一页上?同样，如果我在主体中使用Streambuilder而不是child小部件标记，则这两个元素本身似乎也可以正常工作.

So, I have just began working on a flutter project and am quite new to the whole experience. I just managed to integrate firebase firestore into my project by creating a few buttons that update, remove, and add documents. However, I also wanted to add a Streambuilder with the list that is being updated on the same page. I tried each task seperately, and they all work fine and dandy, however when I combine the two, the streambuilder shows no data and the buttons won't click. How do I incorporate both buttons and a Streambuilder in one body, or one page? What can I do to combine both of these elements onto one page in the widget build method? Again, the two elements seem to be working okay by themselves if I use the Streambuilder in the body and not a children widget tag.

无法正常显示的页面的图片.请注意，当鼠标悬停在并且流构建器无限加载时，如何不选择按钮: https://i.stack.imgur.com/XnfVJ.png Firebase数据屏幕截图(安全设置允许用户访问数据): https://i.stack. imgur.com/oSsOL.png

A picture of what the not working page looks like. Notice how the buttons are not being selected when hovered over and the streambuilder is loading infinitely: https://i.stack.imgur.com/XnfVJ.png Firebase data screenshot (security settings allow users to access the data): https://i.stack.imgur.com/oSsOL.png

这是我的main.dart代码:

Here is my code for 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());
    }
  }
}

推荐答案

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

Still don't know why the code above didn't work, but putting the streambuilder within an Expanded block seemed to do the trick! Both widgets are working fine as of now.

import 'package:flutter/material.dart';

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

import 'package:cloud_firestore/cloud_firestore.dart';

void main()=> runApp(new MediaQuery( 数据:new MediaQueryData()，子元素:new MaterialApp(home:new MyApp())))

void main() => runApp(new MediaQuery( data: 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不能正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！