firebase - 有人能告诉我如何把它变成一个 listview.builder 并且仍然连接到 firebase 吗？顺便说一句，我收藏的名字是“杂货”

Question

目前它是一个listview，我知道如何正常创建一个listview.builder，但我不知道如何将它连接到firebase。我在谈论流构建器和上下文以及所有这些东西。非常感谢任何帮助，如果这是一个明显/愚蠢的问题，我很抱歉。

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(FireApp());
}

class FireApp extends StatefulWidget {
  @override
  _FireAppState createState() => _FireAppState();
}
class _FireAppState extends State<FireApp> {
  final TextController = TextEditingController();

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {

    CollectionReference groceries =
    FirebaseFirestore.instance.collection('groceries');

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: TextField(
            controller: TextController,
          ),
        ),
        body: Center(
          child: StreamBuilder(
            stream: groceries.orderBy('name').snapshots(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              return ListView(
                children: snapshot.data!.docs.map((grocery) {
                  return Center(
                    child: Row(
                      children: [
                        Container(color: Colors.red,height: 50,child: Text(grocery['name'])),
                    Checkbox(
                        materialTapTargetSize: MaterialTapTargetSize.padded,
                        value: isChecked,
                        activeColor: Colors.black,
                        checkColor: Colors.greenAccent,
                        onChanged: (bool) {
                          setState(() {
                            isChecked = !isChecked;
                          });
                        }
                    )],
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          groceries.add({
            'name': TextController.text,
          });
        },),
      ),
    );
  }
}

标签： firebasefluttergoogle-cloud-firestoreflutter-layout

Answer 1

下面给出了 StreamBuilder 和 listview.builder 示例代码

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
  stream: groceries.orderBy('name').snapshots(),
  builder: (context,
      AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
    // your list of groceries
    List groceriesList =
        snapshot.data.docs.map((e) => e.data()).toList();
    return ListView.builder(
      itemCount: groceriesList.length,
      itemBuilder: (context, i) {
        // build your widget here.
        return Center(
          child: Row(
            children: [
              Container(
                color: Colors.red,
                height: 50,
                child: Text(groceriesList[i]['name']),
              ),
              Checkbox(
                materialTapTargetSize: MaterialTapTargetSize.padded,
                value: isChecked,
                activeColor: Colors.black,
                checkColor: Colors.greenAccent,
                onChanged: (bool) {
                  setState(() => isChecked = !isChecked);
                },
              )
            ],
          ),
        );
      },
    );
  },
),