所以,我才刚刚开始进行一个扑朔迷离的项目,并且对整个体验来说还很陌生。我只是通过创建一些按钮来更新,删除和添加文档,从而将Firebase Firestore集成到我的项目中。但是,我还想添加一个Streambuilder,并在同一页面上更新列表。我分别尝试了每个任务,它们都正常工作,但当我将两者结合在一起时,streambuilder不会显示任何数据,并且按钮也不会单击。如何在一个主体或一页中同时包含按钮和Streambuilder?如何在小部件构建方法中将这两个元素组合到一页上?同样,如果我在主体中使用Streambuilder而不是child小部件标记,那么这两个元素似乎本身也可以正常工作。
无效页面的外观图片。请注意,当鼠标悬停在并且流构建器无限加载时,如何不选择按钮:https://i.stack.imgur.com/XnfVJ.pngFirebase数据屏幕截图(安全设置允许用户访问数据):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());
}
}
}
仍然不知道上面的代码为什么不起作用,但是将streambuilder放在Expanded块中似乎可以解决问题!到目前为止,两个小部件都可以正常工作。
import 'package:flutter/material.dart';
导入'package:cloud_firestore / cloud_firestore.dart';
void main()=> runApp(new MediaQuery(数据:new MediaQueryData(),子元素: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
);