Filter Flutter listview.builder by category by Firestore_如何使用StreamBuilder从firebase firestore中检索数据到flutter中，并使用ListView.builder显示值？ - 腾讯云开发者社区

Filter Flutter listview.builder by category by Firestore

基础概念

ListView.builder 是 Flutter 中用于构建可滚动列表的常用小部件。它允许你高效地构建列表，因为它只为屏幕上可见的项创建子小部件。

Firestore 是 Firebase 提供的 NoSQL 数据库，它允许你轻松地存储和同步数据。Firestore 适用于需要实时数据更新的应用程序。

类型

ListView.builder: Flutter 小部件类型。
Firestore: Firebase 数据库类型。

应用场景

ListView.builder: 适用于需要显示大量数据列表的应用，如新闻应用、社交媒体应用等。
Firestore: 适用于需要实时数据同步的应用，如聊天应用、协作工具等。

问题：Filter Flutter ListView.builder by category by Firestore

为什么会这样？

当你需要根据 Firestore 中的数据类别过滤 ListView.builder 中的项时，可能是因为你的数据结构中有一个字段表示类别，而你希望只显示特定类别的项。

原因是什么？

假设你的 Firestore 数据结构如下：

{
  "items": [
    { "id": 1, "name": "Item 1", "category": "A" },
    { "id": 2, "name": "Item 2", "category": "B" },
    { "id": 3, "name": "Item 3", "category": "A" }
  ]
}

你希望只显示类别为 "A" 的项。

如何解决这些问题？

你可以使用 StreamBuilder 和 ListView.builder 结合来实现这个功能。以下是一个示例代码：

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

class CategoryFilteredList extends StatelessWidget {
  final String category;

  CategoryFilteredList({required this.category});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('items').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }

        return ListView.builder(
          itemCount: snapshot.data!.docs.length,
          itemBuilder: (BuildContext context, int index) {
            DocumentSnapshot document = snapshot.data!.docs[index];
            if (document['category'] == category) {
              return ListTile(
                title: Text(document['name']!),
              );
            }
            return Container();
          },
        );
      },
    );
  }
}