如何显示从 Firestore 读取的数据

Question

void _myMatches() {
if (SignUp.userUid != null) {
  FirebaseFirestore.instance
      .collection("posts")
      .where(
        'owner id',
        isEqualTo: SignUp.userUid,
      )
      .where("User Id", isNotEqualTo: [])
      .where("rental status", isEqualTo: false)
      .get()
      .then((value) {
        value.docs.forEach((result) {
          print(result.data());
        });
      });
} else {
  FirebaseFirestore.instance
      .collection("posts")
      .where(
        'owner id',
        isEqualTo: Loginpage.userUid,
      )
      .where("User Id", isNotEqualTo: [])
      .where("rental status", isEqualTo: false)
      .get()
      .then((value) {
        value.docs.forEach((result) {
          print(result.data());
        });
      });
    }
  }
}

您好，我正在使用 Flutter 和 Firestore 编写程序。我的读取数据的函数如下：（上面提到过）

当按下特定按钮时我调用它。这会导致从 firestore 读取的数据打印在控制台上。我该怎么做才能在我的模拟器上显示它。如何将这些数据包装在一个小部件中，以便我可以在我想要的任何页面上的屏幕上显示它？

Answer 1

关键是在获取数据后使用FutureBuilder 呈现UI，并在此之前显示加载。然后在FutureBuilder 的builder 中，使用ListView 和ListTile（或任何你喜欢的）来呈现列表项。

一个最小的例子可能如下所示：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(
    home: App(),
  ));
}

class App extends StatelessWidget {

  Future<QuerySnapshot<Map<String, dynamic>>> getData() {
    // Handle any data retrieval logic you want
    return FirebaseFirestore.instance.collection('posts').get();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<QuerySnapshot<Map<String, dynamic>>>(
        // plug your future snapshot here
        future: getData(),
        builder: (context, snapshot) {
          // Check loading
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          }

          // Check error
          final queryData = snapshot.data;
          if (snapshot.hasError || queryData == null) {
            return Icon(Icons.error);
          }

          return Scaffold(
            // Use ListView.builder to render only visible items
            body: ListView.builder(
              itemCount: queryData.docs.length,
              itemBuilder: (context, index) {
                // Get data inside docs
                final docData = queryData.docs[index].data();
                return ListTile(
                  title: docData['title'],
                  subtitle: docData['subtitle'],
                );
              },
            ),
          );
        });
  }
}