firebase - 使用flutter从Firebase的子集合中读取或检索数据列表

Question

我使用Firebase保存数据并使用flutter( Dart )访问此数据
现在。我的收藏集具有名称(Customer_payment_details)，我将这样的随机唯一ID(tZ9d9cYeUvXKm1easHtr)放入，在此ID中，我有子收藏集(Payment_info)。在此子集合中具有唯一的ID。并且在这个id中有很多值。

我想将此数据读取为列表

我写这段代码来访问这些数据

该代码贝洛是我的型号名称(Customer_payment_details)

class Customer_payment_details {
  String customer_id;
  String payment_date;
  String stay_balance;
  String amount_balance;
  String customer_note;
  String dept_now;
  String id;
  Customer_payment_details({ this.id ,this.customer_id, this.payment_date, this.stay_balance , 
  this.customer_note , this.amount_balance , this.dept_now });

   Customer_payment_details.fromMap_details(Map snapshot,String id) :
   id = id ?? '',
    customer_id = snapshot['customer_id'] ?? '',
    payment_date = snapshot['payment_date'] ?? '',
    stay_balance = snapshot['stay_balance'] ?? '',
    amount_balance =snapshot["amount_balance"] ?? '',
    customer_note = snapshot['customer_note'],
    dept_now = snapshot['dept_now'];

  toJson() {
   return {
  "customer_id" : customer_id,

  "payment_date": payment_date,
 "stay_balance" : stay_balance,
  "amount_balance" : amount_balance,

  "customer_note" : customer_note,
  "dept_now" : dept_now,
};
}
}

这是我的API:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';

class payment_api {
 final Firestore _db = Firestore.instance;
 final String path;
 CollectionReference ref;

 payment_api(this.path) {
   ref = _db.collection(path);
  }

  Future<QuerySnapshot> getDataCollection() {
   return ref.getDocuments();
  }

  Stream<QuerySnapshot> streamDataCollection() {
    return ref.snapshots();
  }

  Future<DocumentSnapshot> getDocumentById(String id) {
   return ref.document(id).get();
  }

  Future<void> removeDocument(String id) {
    return ref.document(id).delete();
  }

   Future<DocumentReference> addDocument(Map data, String customer_id) {
    return ref.document(customer_id).collection("Payment_info").add(data);
   }

   Future<void> updateDocument(Map data, String id) {
    return ref.document(id).updateData(data);
  }
 }

这是我的屏幕:

import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:flutter/material.dart';
 import 'package:login_example/CustomerCore/models/cstomer_payment_detailsModel.dart';
 import 'package:login_example/CustomerCore/models/productModel.dart';
 import 'package:login_example/CustomerCore/viewmodels/CRUDModel.dart';
 import 'package:login_example/CustomerCore/viewmodels/customer_paymentCRUD.dart';
 import 'package:login_example/uiCustomer/widgets/payment_details_card.dart';
 import 'package:login_example/uiCustomer/widgets/productCard.dart';
 import 'package:provider/provider.dart';

 class payment_details_view extends StatefulWidget {
   @override
   _payment_details_viewState createState() => _payment_details_viewState();
 }

 class _payment_details_viewState extends State<payment_details_view> {
   List<Customer_payment_details> customers_information;

  @override
   Widget build(BuildContext context) {
    final productProvider = Provider.of<customer_paymentCRUD>(context);

   return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.deepPurple,
    title: Center(child: Text('ايوب محمد ابراهيم')),
  ),
  body: Container(
    child: StreamBuilder(
        stream:   productProvider.fetchcustomer_paymentsAsStream(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasData) {
            customers_information = snapshot.data.documents
                .map((doc) => Customer_payment_details.fromMap_details(doc.data, 
           doc.documentID)).toList();
            return ListView.builder(
              itemCount: customers_information.length,
              itemBuilder: (buildContext, index) => payment_details_card(
                  customer_details: customers_information[index]),
            );

这是我的卡:

Payment_details_card类扩展了StatelessWidget {
最终的Customer_payment_details customer_details；

MoneyFormatterOutput fmf;
String convert_value (String value){
fmf = FlutterMoneyFormatter(
    amount: double.parse(value),
    settings: MoneyFormatterSettings(
        symbol: 'د.ع',
        thousandSeparator: ',',
        decimalSeparator: '.',
        symbolAndNumberSeparator: ' ',
        fractionDigits: 0,
        compactFormatType: CompactFormatType.short
    )
).output;
return fmf.symbolOnLeft;
 }
 payment_details_card({@required this.customer_details});


  @override
  Widget build(BuildContext context) {
return GestureDetector(
  onTap: (){
  //  Navigator.push(context, MaterialPageRoute(builder: (_) => CustomerProfilePage(customer_info: 
 customer_details)));
    print(customer_details.id);
  },
  child: Padding(
    padding: EdgeInsets.all(8),
    child: Card(
      elevation: 10,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        height: MediaQuery
            .of(context)
            .size
            .height * 0.30,
        width: MediaQuery
            .of(context)
            .size
            .width * 0.9,
        child: Column(
          children: <Widget>[
            Hero(
                tag: customer_details.customer_id,

                child :   Material(
                  color: Colors.white70,
                  child: Column(

                    crossAxisAlignment: CrossAxisAlignment.center,

                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(right: 10.0 , top: 15.0),
                        child:   Text(

                          //اسم الزبون
                          customer_details.customer_id,

                          textDirection: TextDirection.rtl,

                          style: TextStyle(
                            fontFamily: 'JannaLT-Regular',
                            fontWeight: FontWeight.w900,
                            fontSize: 22,
                            color:  Colors.black,


                          ),
                        ),
                      ),

等等...

下图显示了数据库:

和此图像用于子集合

我想将此数据加载为卡中的列表 View 。有人可以帮忙吗？

Answer 1

检查此代码。

       stream:   productProvider.fetchcustomer_paymentsAsStream(),
       builder: (context,snapshot) {
         if (snapshot.hasData) {
            List<Customer_payment_details> customers_information= snapshot.data;

           return ListView.builder(
             itemCount: customers_information.length,
             itemBuilder: (context, index){

               return YourCardClass(
                               customers_information: customers_information[index]);

}