我想做一个像Instagram一样的基于用户上传的图像网格。流构建器不显示来自Firestore的任何数据。我已经分离了流,所以它不在流构建器内部。
这是密码
import 'dart:io';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
File? imageFile;
String? imageUrl;
final FirebaseAuth _auth = FirebaseAuth.instance;
String? myImage;
String? myName;
String buttonName = 'click';
int currentIndex = 0;
final icon = CupertinoIcons.chat_bubble_2;
final _constructed = FirebaseFirestore.instance
.collection('fotoupload')
.orderBy("createAt", descending: true)
.snapshots(); //construct stream first
//final Stream<QuerySnapshot> _constructed = FirebaseFirestore.instance
// .collection('fotoupload')
// .orderBy("createAt", descending: true)
// .snapshots();
void read_userInfo() async {
FirebaseAuth.instance.currentUser!;
FirebaseFirestore.instance
.collection('users')
.doc(FirebaseAuth.instance.currentUser!.uid)
.get()
.then<dynamic>((DocumentSnapshot snapshot) async {
myImage = snapshot.get('userImage');
myName = snapshot.get('name');
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
read_userInfo(); // refresh and read the user info both myName and myImage
}
Widget gridViewWidget(String docId, String img, String userImg, String name,
DateTime date, String userId, int downloads) {
return GridView.count(
primary: false,
padding: EdgeInsets.all(5),
crossAxisSpacing: 1,
crossAxisCount: 1,
children: [
GestureDetector(
onTap: () {
//createOwnerDetails
},
child: Center(
child: Text(date.toString()),
),
),
GestureDetector(
onTap: () {
//createOwnerDetails
},
child: Image.network(
img,
fit: BoxFit.cover,
),
),
Center(child: Text(userId)),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<QuerySnapshot>(
stream: _constructed,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.connectionState == ConnectionState.active) {
if (snapshot.data!.docs.isNotEmpty) {
return GridView.builder(
itemCount: snapshot.data!.docs.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return gridViewWidget(
snapshot.data!.docs[index].id,
snapshot.data!.docs[index]['Image'],
snapshot.data!.docs[index]['userImage'],
snapshot.data!.docs[index]['name'],
snapshot.data!.docs[index]['createAt '].toDate(),
snapshot.data!.docs[index]['uid'],
snapshot.data!.docs[index]['downloads'],
);
},
);
} else {
return Center(
child: Text(
'There is no tasks',
style: TextStyle(fontSize: 20),
),
);
}
}
return Center(
child: Text(
'Something went wrong',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
);
},
),
);
}
}
有人有建议吗?StreamBuilder没有显示数据。它显示“没有任务”。
2条答案
按热度按时间vxqlmq5t1#
每次构建后都要重新构建流,我建议您在私有变量中构建流,然后在流中使用它来代替
FirebaseFirestore.instance.collection('fotoupload').orderBy("createAt", descending: true).snapshots()
如此处所述它是这样实现的
iq3niunx2#
这就是你的问题。不要在流中创建流:参数。每次调用build()时都会重新创建它,如果页面上有动画,每秒最多创建60次。这不会给任何数据显示时间...事实上,每次重新创建时都会将其丢弃。
请遵循FutureBuilder和StreamBuilder文档中的建议:创建并初始化小部件的state和initState中的流。2值必须保持不变,StreamBuilder才能完成它的工作。
我在https://youtu.be/sqE-J8YJnpg有更多的细节和演示。