Streambuilder 没有显示来自 firestore 的数据

Question

我想根据用户上传的 3 像 instagram 制作图像网格。 streambuilder 没有显示来自 firestore 的任何数据。 我已经将 stream 分开，所以它不在 streambuilder 中。

这是代码

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 不显示数据。 并显示“没有任务”。

Answer 1

    stream: FirebaseFirestore.instance
        .collection('fotoupload')
        .orderBy("createAt", descending: true)
        .snapshots(),

这是你的问题。 不要在 StreamBuilder 的 stream: 参数中创建 stream。 它将在每次调用 build() 时重新创建，如果页面上有 animation，每秒最多 60 次。 这不会给任何数据出现的时间……事实上，它会在每次重建时将其丢弃。

遵循 FutureBuilder 和 StreamBuilder 文档中的建议：在小部件的 state 和 initState 中创建并初始化 stream。 该值必须保持不变，StreamBuilder 才能完成其工作。

我在https://youtu.be/sqE-J8YJnpg有更多详细信息和演示。

Answer 2

您在每次构建后再次重建 stream，我建议您在私有变量中构建 stream，然后在 stream 中使用它代替FirebaseFirestore.instance.collection('fotoupload').orderBy("createAt", descending: true).snapshots()

如此处所述它是这样实现的

class _HomePageState extends State<HomePage> {
final _constrcted = FirebaseFirestore.instance
        .collection('fotoupload')
        .orderBy("createAt", descending: true)
        .snapshots();
//....
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: StreamBuilder<QuerySnapshot>(
        stream: _constrcted,
        builder: (context, snapshot) {
       //...
}