Flutter：自動刷新更新數據

Question

我正在開發一個包含 + 和 - 按鈕的購物車頁面，按下它時，后端的值會改變，但它不會在前端自動改變。

購物車頁面.dart

class CartUI extends StatefulWidget {
  const CartUI({Key? key}) : super(key: key);

  @override
  State<CartUI> createState() => _CartUIState();
}

class _CartUIState extends State<CartUI> {
  @override
  Widget build(BuildContext context) {
    final user = Provider.of<Userr?>(context, listen: false);
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(children: [
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: StreamBuilder<QuerySnapshot>(
                  stream: FirebaseFirestore.instance
                      .collection('myOrders')
                      .doc(user?.uid)
                      .collection('items')
                      .snapshots(),
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return Center(
                        child: Lottie.asset('assets/animations/delivery.json'),
                      );
                    } else {
                      return ListView.builder(
                          physics: NeverScrollableScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: snapshot.data!.docs.length,
                          itemBuilder: (BuildContext context, int index) {
                            final DocumentSnapshot documentSnapshot =
                            snapshot.data!.docs[index];
                            return Container(
                              height: 120,
                              width: 300,
                              child: Row(
                                children: [
                                  Column(
                                    children: [
                                      SizedBox(
                                        width: 200,
                                        child: Text(
                                          documentSnapshot['name'],
                                          style: const TextStyle(
                                            color: Colors.black87,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 15,
                                          ),
                                        ),
                                      ),
                                      Text(
                                        documentSnapshot['quantity'].toString(),
                                        style: const TextStyle(
                                          fontSize: 15,
                                        ),
                                      ),
                                      Text(
                                        'Rs.${documentSnapshot['price'].toString()}',
                                        style: const TextStyle(
                                          color: Colors.black87,
                                          fontSize: 15,
                                        ),
                                      ),
                                      Row(
                                          mainAxisAlignment:
                                          MainAxisAlignment.start,
                                          children: [
                                            const SizedBox(
                                              width: 40,
                                            ),
                                            ElevatedButton(
                                              onPressed: () {
                                                if (documentSnapshot['value'] != 0.0) {
                                                  setState(() {
                                                    String id = documentSnapshot['docid'];
                                                    final user = Provider.of<Userr?>(context, listen: false);
                                                    var postDocRef = FirebaseFirestore.instance.collection('myOrders').doc(user?.uid).collection('items').doc();
                                                    Provider.of<Calculations>(context, listen: false).updatecartdata(
                                                        context,
                                                        {
                                                          'value': documentSnapshot['value'] - 0.5,
                                                          'price': documentSnapshot['price'] - (documentSnapshot['ogprice'] / 2),
                                                        },id
                                                    );
                                                  }
                                                  );
                                                }
                                                if (documentSnapshot['value'] ==
                                                    0.5) {
                                                  String id =
                                                  documentSnapshot['docid'];
                                                  Provider.of<ManageData>(
                                                      context,
                                                      listen: false)
                                                      .deleteData(context, id);
                                                }
                                              },
                                              child: const Text('-'),
                                            ),
                                            const SizedBox(width: 20),
                                            Text(documentSnapshot['value']
                                                .toString()),
                                            const SizedBox(width: 20),
                                            ElevatedButton(
                                              onPressed: () {
                                                String id =
                                                documentSnapshot['docid'];
                                                final user =
                                                Provider.of<Userr?>(context,
                                                    listen: false);
                                                var postDocRef =
                                                FirebaseFirestore.instance
                                                    .collection('myOrders')
                                                    .doc(user?.uid)
                                                    .collection('items')
                                                    .doc();
                                                Provider.of<Calculations>(context, listen: false).updatecartdata(
                                                    context,
                                                    {
                                                      'value': documentSnapshot['value'] + 0.5,
                                                      'price': documentSnapshot['price'] + (documentSnapshot['ogprice'] / 2),
                                                    },id
                                                );
                                              },
                                              child: const Text('+'),
                                            ),
                                          ]),
                                    ],
                                  ),
                                ],
                              ),
                            );
                          });
                    }
                  },
                ),
              ),
              _BillDetailView(),
            ]),
          ],
        ),
      ),
    );
  }
}


class _BillDetailView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textStyle =
    Theme
        .of(context)
        .textTheme
        .bodyText1!
        .copyWith(fontSize: 16.0);

    return Container(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Bill Details',
            style:
            Theme
                .of(context)
                .textTheme
                .headline6!
                .copyWith(fontSize: 17.0),
          ),
          SizedBox(
            height: 5,
          ),
          FutureBuilder(
            future: Provider.of<Calculations>(context, listen: false)
                .getTotalCost(context),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text('Item total', style: textStyle),
                    Text('${snapshot.data}', style: textStyle),
                  ],
                );
              } else if (snapshot.hasError) {
                return Text("Error: ${snapshot.error.toString()}");
              } else {
                return const CircularProgressIndicator();
              }
            },
          ),
        ],
      ),
    );
  }
}

計算.dart

  Future<dynamic> getTotalCost(BuildContext context) async {
    final user = Provider.of<Userr?>(context, listen: false);
    double totalCost = 0.0;
    QuerySnapshot snapshot = await FirebaseFirestore.instance
        .collection('myOrders')
        .doc(user?.uid)
        .collection('items')
        .get();
    for (var doc in snapshot.docs) {
      totalCost += doc["price"];
    }
    print(totalCost.toString());
    return totalCost.toString();
  }

前端的值發生變化，但最后更新（添加或減去）的值沒有反映出來。熱重載后它會改變，但不會自動改變。 如何更改此代碼以自動更新前端的項目總計。

Answer 1

您需要使用StreamBuilder而不是FutureBuilder來獲取實時更新。

將您的Calculation.dart更改為：

Stream<dynamic> getTotalCost(BuildContext context) async {
    final user = Provider.of<Userr?>(context, listen: false);
    double totalCost = 0.0;
    QuerySnapshot snapshot = await FirebaseFirestore.instance
        .collection('myOrders')
        .doc(user?.uid)
        .collection('items')
        .snapshots();

    for (var doc in snapshot.docs) {
      totalCost += doc["price"];
    }
    
    print(totalCost.toString());
    return totalCost.toString();
  }

並將FutureBuilder更改為StreamBuilder ：

StreamBuilder(
            stream: Provider.of<Calculations>(context, listen: false)
                .getTotalCost(context),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text('Item total', style: textStyle),
                    Text('${snapshot.data}', style: textStyle),
                  ],
                );
              } else if (snapshot.hasError) {
                return Text("Error: ${snapshot.error.toString()}");
              } else {
                return const CircularProgressIndicator();
              }
            },
          ),