flutter Streambuilder未显示来自firestore的数据

mfuanj7w  于 2022-11-30  发布在  Flutter
关注(0)|答案(2)|浏览(196)

我想做一个像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没有显示数据。它显示“没有任务”。

vxqlmq5t

vxqlmq5t1#

每次构建后都要重新构建流,我建议您在私有变量中构建流,然后在流中使用它来代替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) {
       //...
}
iq3niunx

iq3niunx2#

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

这就是你的问题。不要在流中创建流:参数。每次调用build()时都会重新创建它,如果页面上有动画,每秒最多创建60次。这不会给任何数据显示时间...事实上,每次重新创建时都会将其丢弃。
请遵循FutureBuilder和StreamBuilder文档中的建议:创建并初始化小部件的state和initState中的流。2值必须保持不变,StreamBuilder才能完成它的工作。
我在https://youtu.be/sqE-J8YJnpg有更多的细节和演示。

相关问题