Flutter Function returns 使用 Firebase 的空列表

Question

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

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

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

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

如您所见，我使用了我创建的名为 Question().

的 class 中的方法 view()

view() 方法 return 是一个小部件列表。

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

List<Widget> widgets = List();

您可以在下面看到 Question class（Question.dart 文件）中的 .view() 方法：

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 列表，所以我可以监控整个过程。

如您所见，我在 return 语句之前添加了一个 print(widgets)。

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

据我所知，函数 return 是一个空列表，然后我从数据库中检索数据并将它们添加到列表中。

所以我想问，如何将我的数据添加到列表中，当这个过程完成后，return 列表并将其附加到 Column() 小部件？我应该在 return 语句中添加延迟吗？我错过了什么？

感谢您的宝贵时间

Answer 1

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

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

参见：

Answer 2

    // return type is like this
    Future<List<Widget>> view() {
    
    Database db = database();
    DatabaseReference ref = db.ref('questions/');

    // return this
    return ref.orderByKey().once("value").then((e) {
      DataSnapshot datasnapshot = e.snapshot;

      datasnapshot.val().forEach((key, values) {
        widgets.add(QuestionWidget(values));
      });
      
      // return widgets after added all values
      return widgets;
    });

Flutter Function returns 使用 Firebase 的空列表

Flutter Function returns empty list using Firebase

dart

firebase-realtime-database

flutter

flutter-web