Flutter使用Firebase数据构建Widget返回空组件问题求助

reviews.once() 是异步网络请求操作，调用后不会立刻执行then回调内的列表填充逻辑，Dart会优先执行后续的return Column(children: reviewList)语句，此时reviewList还未被填充任何元素，自然返回空组件。等Firebase数据返回、then回调执行时，函数早已完成返回，不会触发界面更新，不存在列表被清空的情况，是你返回的时机早于数据返回的时机。

Flutter处理异步渲染的标准实现是用FutureBuilder，调整代码逻辑如下：

1. 先把获取评论列表的方法改为异步函数，返回Future类型的列表：

Future<List<Widget>> getReviewCards(DatabaseReference reviews) async {
  List<Widget> reviewList = <Widget>[];
  DataSnapshot snapshot = await reviews.once();
  final data = Map<dynamic, dynamic>.from(snapshot.value);
  data.forEach((key, value) { 
    reviewList.add(ReviewCard(stars: 2, reviewText: value.toString(), username: key));
  });
  return reviewList;
}

2. 在你需要渲染评论列表的位置，使用FutureBuilder包裹渲染逻辑：

// 替换你之前调用getReviewCards的位置为以下代码
FutureBuilder<List<Widget>>(
  future: getReviewCards(reviews),
  builder: (context, snapshot) {
    // 数据加载中时展示加载指示器
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 加载出错时展示错误提示
    if (snapshot.hasError) {
      return Text('加载失败：${snapshot.error}');
    }
    // 数据加载完成后渲染评论列表
    return Column(children: snapshot.data ?? []);
  }
)

注意：为了避免每次页面重绘都重复发起请求，建议把getReviewCards(reviews)返回的Future提前初始化到State类的变量中，不要直接在builder参数里创建Future实例。

内容的提问来源于stack exchange，提问作者Hans Andreas Lindgård