flutter - Flutter 函数使用 Firebase 返回空列表

Question

我正在使用 Flutter web 和 firebase 实时数据库。在我的数据库中，我有一些问题，结构为地图，我试图在我的应用程序中显示它们。

对于每个问题，我创建一个小部件，将其添加到列表中，然后将列表附加到Column()小部件。

小Column()部件如下（view_question.dart文件）：

Column(
  children: Question().view(),
),

如您所见，我使用了view()我创建的一个名为的类中的方法Question()。

该view()方法返回一个小部件列表。

在向您展示该.view()方法之前，我需要提到在Question类之外我已经初始化了以下内容：

List<Widget> widgets = List();

下面你可以.view()从Question类（Question.dart文件）中看到方法：

List<Widget> view() {
    
    Database db = database();
    DatabaseReference ref = db.ref('questions/');

    ref.orderByKey().once("value").then((e) {
      DataSnapshot datasnapshot = e.snapshot;
      datasnapshot.val().forEach((key, values) {
        
        widgets.add(QuestionWidget(values));
        print(widgets);
        
      });
    });
    print(widgets);
    return widgets;

我从我的数据库中获取问题的数据，然后为每个问题创建一个QuestionWidget()小部件，在其中传递相应的数据并将其添加到widgets列表中。之后，我列出print()了widgets清单，这样我就可以监控整个过程。

你也可以看到，我在语句print(widgets)之前添加了一个。return

这是我控制台中的打印输出

据我了解，该函数返回一个空列表，然后我从数据库中检索数据并将它们添加到列表中。

所以我问，我怎样才能将我的数据添加到列表中，当这个过程完成后，返回列表并将其附加到Column()小部件？我应该在退货声明中添加延迟吗？我错过了什么？

感谢您的时间

标签： flutterdartfirebase-realtime-databaseflutter-web

Answer 1

数据从 Firebase 异步加载。到您return widgets运行时，widgets.add(QuestionWidget(values))尚未调用。如果您检查应用程序的调试输出，print您拥有的语句应该会显示出来。

出于这个原因，您应该widgets在加载后将其设置为状态。然后，这将触发 UI 的重绘，这可以从状态中获取它们。或者，您可以使用 aFutureBuilder来处理此过程。

看：

• 如何将检索到的数据从 firebase 放入 Flutter 中的小部件？
• 从 Firebase 加载数据缓慢导致“RangeError（索引）”