我將產品存盤在 cloud firestore 上，我可以使用 provider 獲取和顯示產品package。但是，當我轉到不同的頁面并回傳產品螢屏時，產品每次都會重復。
產品類
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class Product with ChangeNotifier {
final String id;
final String title;
final double price;
final String imageUrl;
Product({
required this.id,
required this.title,
required this.price,
required this.imageUrl,
});
}
class Products with ChangeNotifier {
final List<Product> _products = [];
Future<void> fetchProducts() async {
await FirebaseFirestore.instance
.collection('products')
.orderBy('id', descending: true)
.get()
.then((QuerySnapshot snapshot) {
for (var doc in snapshot.docs) {
_products.insert(
0,
Product(
id: doc['id'],
title: doc['title'],
price: doc['price'],
imageUrl: doc['imageUrl'],
));
notifyListeners();
}
});
}
List<Product> get items {
return [..._products];
}
}
產品螢屏
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import '/constants/constants.dart';
import 'package:provider/provider.dart';
import '/providers/products.dart';
import '/widgets/product_list.dart';
class ProductsScreen extends StatefulWidget {
const ProductsScreen({Key? key}) : super(key: key);
@override
State<ProductsScreen> createState() => _ProductsScreenState();
}
class _ProductsScreenState extends State<ProductsScreen> {
var _isInit = true;
var _isLoading = false;
@override
void didChangeDependencies() {
if (_isInit) {
setState(() {
_isLoading = true;
});
Provider.of<Products>(context).fetchProducts().then((_) {
setState(() {
_isLoading = false;
});
});
}
_isInit = false;
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _isLoading
? const Center(
child: SpinKitThreeBounce(
color: kPrimaryColor,
size: 30.0,
),
)
: const ProductList(),
);
}
}
uj5u.com熱心網友回復：
您可以簡單地在提供程式中添加建構式并初始化 _products 串列，或者只是在 for 回圈之前清除 _products
class Products{
List<dynamic> _products;
Producst(){
_products=[];
}
}
或者
class Products{
List<dynamic> _products;
void fetch(){
_products.clear();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524109.html
標籤：Google Cloud Collective 扑镖谷歌云火库提供者