Flutter：如何使用 ListViewBuilder 从 streambuilder/futurebuilder 中的 firebase 实时数据库中获取（全部）子数据？

Question

我试图通过 ListView.builder() 从 StreamBuilder 或 FutureBuilder 中的实时数据库中获取所有子数据（'users'），但不幸的是它总是 returns 空！

那我该怎么做呢？

这是我尝试做的事情：

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


class HomeWidget extends StatelessWidget {
  const HomeWidget({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     final dbRef = FirebaseDatabase.instance.ref().child("users");

    return FutureBuilder(
      future: dbRef.once(),
      builder: (ctx, AsyncSnapshot snapshot){
        if(snapshot.connectionState == ConnectionState.waiting){
                return const Center(child: CircularProgressIndicator());
              }
        if(snapshot.hasData){
final userS = snapshot.data!.snapshot.value;
          return ListView.builder(
            itemCount: userS.length,
            itemBuilder: (BuildContext ctx, i)=> Container(
              height: 100,
              width: 100,
              child:  Card(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                child: Column(
                  children: [
                    Text(userS[i]['username']),
                    Text(userS[i]['password'])
                  ],
                ),
              ),
            ),
            );
        }
        return const Center(child: Text('There is something wrong!'),);
      },
      );
  }
}

enter image description here

Answer 1

您应用中的这段代码：

final userS = snapshot.data!.snapshot.value

您正在获取 DataSnapshot object 的值，在您的情况下将是 Map<String, dynamic>。 Map 没有 [] 访问器，这就是为什么会出现错误。

如果你想通过索引获取结果，保留 DataSnapshot:

可能更容易

final userS = snapshot.data!.snapshot;

然后通过索引访问它的children：

children: [
  Text(userS.children.toList()[i].child('username').value),
  Text(userS.children.toList()[i].child('password').value)
],

所以这里我们使用userS.children.toList()将子快照放到一个列表中，然后通过索引查找正确的快照。然后我们可以从那里获取其 username 和 password 子属性的值。

Flutter：如何使用 ListViewBuilder 从 streambuilder/futurebuilder 中的 firebase 实时数据库中获取（全部）子数据？

Flutter: How to fetch (all) of a child data from firebase realtime database in streambuilder/futurebuilder with ListViewBuilder?

firebase-realtime-database

flutter