在 Flutter 中将 Firebase 数据作为 Listview 构建器获取

Posted 2023-02-23

【中文标题】在 Flutter 中将 Firebase 数据作为 Listview 构建器获取

【英文标题】：fetch Firebase data to as Listview builder in flutter

【发布时间】：2021-09-04 15:32:31

【问题描述】：

有人可以帮我吗，我有实时 Firebase 图像的名字簿列表，每本书都有一个整数 ID，所以当我尝试从 firebase 获取数据时，它会给我一个没有任何数据的白屏。 但是当我在终端中打印出获取的结果时，我看到了结果，我检查了所有教程，但所有教程都使用 firebase 中的随机 id。 这是我的代码：

class DetailsList extends StatefulWidget 
  final List<DetailScreen> listSection;
  final String bName;

  const DetailsList( this.listSection,@required this.bName) ;
  @override
  _DetailsListState createState() => _DetailsListState();


class _DetailsListState extends State<DetailsList> 
  @override
  Widget build(BuildContext context) 
    //var controller = IndexedScrollController();
    Size size = MediaQuery.of(context).size;
    return Expanded(
        //flex: 4,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            FutureBuilder(
              future:snapvalue(widget.bName),
                builder: (context,snapshot)
              if(snapshot.hasData)
              print(snapshot.connectionState);
              print(snapshot.hasData);
                return CircularProgressIndicator();
              else return ListView.builder(
                itemCount: 10,
                  itemBuilder: (context,index)
                    print(snapshot.data[index].title);
                //return SectionCard(snapshot: snapshot.data[index]);
                //     return Flexible(
                //       child: Card(child: ListTile(
                //         leading: ImageCard(imageSource: snapshot.data.image.toString(),),
                //         title: snapshot.data[index].title,
                //         subtitle: snapshot.data[index].pdf,
                //       ),),
                //     );
              );
            )
          ],
        ),
      );
  

以及从 Firebase 代码中获取数据：

Future snapvalue(String child2) 
  List<String>detailslist;
  DatabaseReference data = dbRef.child(child2);
  data.once().then((DataSnapshot snap) 
    var key= snap.key.toString();
    var value= snap.value;
    if (value != null) 
      print("key"+key);
      print("value"+snap.value.toString());

      return value;
else print("No Data");
  );

【参考方案1】：

您的问题是 UI 问题，因为您在列内使用 listview，并且它们都垂直交换。在列表视图中使用shrinkwrap: true。

甚至 listtiles 在列表视图中水平扩展至无穷大。

用SizedBox 包裹你的listtiles，并给盒子宽度size.width * 0.8

因为您已经有一个Size size 变量。

这应该可行。

Card(child: SizedBox(width: size.width* 0.8, 
                      child: ListTile(
                       leading: ImageCard(imageSource: snapshot.data.image.toString(),),
                        title: snapshot.data[index].title,
                        subtitle: snapshot.data[index].pdf,
                      ),),)