Flutter 函数使用 Firebase 返回空列表

Question

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

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

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

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

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

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

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

List<Widget> widgets = List();

您可以在下面看到Question 类（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)。

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

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

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

感谢您的宝贵时间

Answer 1

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

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

见：

• How can I put retrieved data from firebase to a widget in Flutter?
• Slow data loading from firebase causing "RangeError (index)"

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;
    });