You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Firestore数据加载至列表无显示问题求助

Firestore数据加载到ListView无显示问题

我尝试将Firestore中的数据加载到ListView时,列表完全无显示。已确认集合名称正确,Firebase处于开发模式,相关代码如下:

页面状态类与数据获取逻辑

class _HomeScreenState extends State<HomeScreen> {
  final List<ShoppingItems> items = [];
  List<RecommendedItems> recommendedItems = [];
  List<BestSellerItems> bestSellerItems = [];
  CollectionReference products =
      FirebaseFirestore.instance.collection('Product');

  Future<void> getData() async {
    var response = await products.get();
    List<ShoppingItems> newData = [];
    response.docs.forEach((element) {
      newData.add(
        ShoppingItems(
          name: (element.data() as Map<String, dynamic>)['name'], // Replace 'name' with the actual field name in your Firestore document
          price: (element.data() as Map<String, dynamic>)['price'], // Replace 'price' with the actual field name in your Firestore document
          image: (element.data() as Map<String, dynamic>)['image'], // Replace 'image' with the actual field name in your Firestore document
          itemState: (element.data() as Map<String, dynamic>)['ItemState'], // Replace 'ItemState' with the actual field name in your Firestore document
          type: (element.data() as Map<String, dynamic>)['type'], // Replace 'type' with the actual field name in your Firestore document
          description: (element.data() as Map<String, dynamic>)['description'], // Replace 'description' with the actual field name in your Firestore document
        ),
      );
    });
    setState(() {
      items.addAll(newData);
    });
    debugPrint('newData length: ${newData.length}');
    debugPrint(newData.toString());
  }

  @override
  void initState() {
    super.initState();
    initializeItems(items, recommendedItems, bestSellerItems);
    getData();
  }
}

ListView.builder实现代码

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    ShoppingItems item = items[index];

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Container(
        width: 200,
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 1.3,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image.network(
                  item.image, // Update the image source
                  fit: BoxFit.cover,
                ),
              ),
            ),
            const SizedBox(height: 5),
            Text(item.name),
            Text(item.price.toString()), // Assuming 'price' is of type double or int
          ],
        ),
      ),
    );
  },
)

数据模型与过滤逻辑代码

class ShoppingItems {
  final String name;
  final String price;
  final String image;
  final String itemState;
  final String? type;
  final String? description;

  ShoppingItems({
    required this.name,
    required this.price,
    required this.image,
    required this.itemState,
    this.type,
    this.description,
  });
}

class RecommendedItems {
  final String name;
  final String price;
  final String image;
  final String? type;
  final String? description;

  RecommendedItems({
    required this.name,
    required this.price,
    required this.image,
    this.type,
    this.description,
  });
}

class BestSellerItems {
  final String name;
  final String price;
  final String image;
  final String? type;
  final String? description;

  BestSellerItems({
    required this.name,
    required this.price,
    required this.image,
    this.type,
    this.description,
  });
}

void initializeItems(
    List<ShoppingItems> items,
    List<RecommendedItems> recommendedItems,
    List<BestSellerItems> bestSellerItems) {
  recommendedItems
      .clear(); // Clear the recommendedItems list before populating it
  bestSellerItems
      .clear(); // Clear the bestSellerItems list before populating it

  for (var item in items) {
    if (item.itemState == 'Recommended') {
      final recommendedItem = RecommendedItems(
        name: item.name,
        price: item.price,
        image: item.image,
        type: item.type,
        description: item.description,
      );
      recommendedItems.add(recommendedItem);
    } else if (item.itemState == 'BestSeller') {
      final bestSellerItem = BestSellerItems(
        name: item.name,
        price: item.price,
        image: item.image,
        type: item.type,
        description: item.description,
      );
      bestSellerItems.add(bestSellerItem);
    }
  }
}

已确认集合名称正确,Firebase处于开发模式,希望能找到列表无显示的原因并解决。


内容的提问来源于stack exchange,提问作者Saria Tahhan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.11 08:31:12