将实时数据库中的数据检索到列表视图中

Posted 2023-02-23

【中文标题】将实时数据库中的数据检索到列表视图中

【英文标题】：Retrieve data from realtime database into listview

【发布时间】：2021-09-13 21:53:16

【问题描述】：

这是我的文件 song.dart

class Song 
  final String title;
  final String singer;
  final String cover;
  final String url;

  Song(this.title, this.singer, this.cover, this.url);

  Song.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        singer = json['singer'],
        cover = json['cover'],
        url = json['url'];

  Map<String, dynamic> toJson() => 
    'title': title,
    'singer': singer,
    'cover': cover,
    'url' : url,
  ;

在 main.dart 上，这是我试图从实时数据库中获取数据的代码：

  List musicList = <Song>[];
  _MusicAppState() 
    FirebaseDatabase.instance.reference().child("$getCurrentUID()").once().then((DataSnapshot snapshot)
      print("Sucessfully loaded the data");
      snapshot.value.forEach((k,v)
        musicList.add(v);
      );
      setState(() 
      );
    ).catchError((error) 
      print("Failed to loaded the data");
    );
  

也在 main.dart 上，这是我试图将数据显示到列表视图中的代码部分：

Expanded(
  child: ListView.builder(
    itemCount: musicList.length,
    itemBuilder: (context, index) => customListTitle(
      onTap: () 
        playMusic(musicList[index]['url']);
        setState(() 
          _currentTitle = musicList[index]['title'];
          _currentSinger = musicList[index]['singer'];
          _currentCover = musicList[index]['cover'];
        );
      ,
      title: musicList[index]['title'],
      singer: musicList[index]['singer'],
      cover: musicList[index]['cover'],
    ),
  ),
),

我不知道为什么数据没有加载到列表视图中。但是如果我删除List musicList = <Song>[]; 行中的<Song>，数据将被加载到列表视图中。如何使用<Song> 将数据加载到列表视图中？因为我需要 Song 类来构建搜索功能，或者我可以在没有类 Song 的情况下构建搜索功能的任何其他方式？

【参考方案1】：

你的 musicList 等待类型为 Song 命名的类，但一旦方法返回 DataSnapshot 类。您应该首先从 DataSnapshot 转换为 Song 类，如果您不知道如何转换我正在解释。

你可以试试下面的代码；

final musicList = <Song>[];
FirebaseDatabase.instance.reference().child("$getCurrentUID()").once().then((DataSnapshot snapshot)
print("Sucessfully loaded the data");
for(final snapshot in snapshot.value)
    final songModel = Song.fromJson(snapshot as Map);
    musicList.add(songModel);

setState(() );
);

【讨论】：

我试过了，但我在 Map 的快照上出错了。 “参数类型 'Map' 不能分配给参数类型 'Map'。”

我还尝试从 Map 更改为 Map 以便“快照作为地图”工作。我还将 musicList[index]['title'] 更改为 musicList[index].title 等等。但是没有任何数据加载到列表视图中

你能尝试删除'as Map'代码sn-p吗？应该查看这个：'Song.fromJson(snapshot);'此外，musicList[index].title 是正确的方式。

同理，列表视图中没有加载任何内容。

如果没有错误，您应该检查“快照”吗？和音乐列表的长度？如果这些都正常，能把所有代码都加进去吗？