如何使用 FirebaseAnimatedList 和 SplashScreen？答案

【问题标题】：How to use FirebaseAnimatedList and SplashScreen?如何使用 FirebaseAnimatedList 和 SplashScreen？
【发布时间】：2021-02-09 04:45:53
【问题描述】：

我正在从 firebase 获取数据并将其显示在列表中。但是一旦页面打开，它就会有几秒钟的空白，因为获取数据和显示需要时间。所以我想显示一个启动/加载屏幕，并在后台加载另一个页面，使其准备好获取数据。因此，一旦显示该页面，它就不会为空，而是显示获取的内容。请帮我怎么做？

这是我显示从 firebase 获取的列表的方式。我用

FirebaseAnimatedList.
 body: FirebaseAnimatedList(
  query: itemRef,
  itemBuilder: (BuildContext context, DataSnapshot snapshot,
      Animation<double> animation, int index) {
    return Text('It work ');
}),

【问题讨论】：

标签： firebase flutter dart

【解决方案1】：

您可以使用 FutureBuilder，并在加载数据后移除 SplashScreen：

    return FutureBuilder<List<String>>(
        future: _firebaseData,
        builder: (context, AsyncSnapshot<List<String>> snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              snapshot.hasData) {
            List<String> firebaseData = snapshot.data; 
            return ListView( [...]
           }
           else
                return SplashScreen();
);

【讨论】：

如果我使用 FirebaseAnimatedList 显示从 firebase 获取的列表，请告诉我该怎么做。我已经用我的示例代码更新了这个问题。

【解决方案2】：

最简单的方法之一是在FirebaseAnimatedList 小部件中使用defaultChild 属性。

代码示例：

 body: FirebaseAnimatedList(
  defaultChild: SplashScreen(),
  query: itemRef,
  itemBuilder: (BuildContext context, DataSnapshot snapshot,
      Animation<double> animation, int index) {
    return Text('It work ');
}),

defaultChild 是加载请求时显示的小部件。

您可以了解更多关于 FirebaseAnimatedList here

【讨论】：

我正在使用 FirebaseAnimatedList 来获取项目列表。 body: FirebaseAnimatedList( query: itemRef, itemBuilder: (BuildContext context, DataSnapshot snapshot, Animation<double> animation, int index) { return (index % 4 == 0) ? Column( children: [ Container( decoration: BoxDecoration(
如果我使用 FirebaseAnimatedList 显示从 firebase 获取的列表，请告诉我该怎么做。我已经用我的示例代码更新了这个问题。