Flutter：FutureBuilder 会同时加载所有内容吗？答案

【问题标题】：Flutter: Do FutureBuilder Loads everything at the same time?Flutter：FutureBuilder 会同时加载所有内容吗？
【发布时间】：2019-05-29 03:00:50
【问题描述】：

我的应用程序有一个书籍摘要功能，现在因为我没有钱来托管 API，所以我使用 Firebase/Firestore 数据库手动添加摘要，然后将数据从 firebase 检索到应用程序。

我正在使用FutureBuilder。现在说我有 10 个摘要将 FutureBuilder 首先加载所有 10 个然后在屏幕上显示数据（这是一个 ListView.builder 并且只能显示 2 个摘要而不滚动）或者它只会加载需要绘制的数据在屏幕上就像简单的ListView.builder。

// code to retrieve data:

Future<QuerySnapshot> getFeedsfromFb() async {
  var data = await Firestore.instance
      .collection('feedItem')
      .orderBy('feedId', descending: true).getDocuments();
  return data;
}

// building widget:

Widget feed() {
  return Container(
    width: deviceWidth,
    height: deviceHeight / 3,
    child: FutureBuilder(
        future: getFeedsfromFb(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data.documents.length > 10
                  ? 10
                  : snapshot.data.documents.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  width: deviceWidth / 2.5,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (BuildContext context) => FeedIntro(
                                  snapshot.data.documents[index]['feedId'])));
                    },
                    child: Card(
                        child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          // width: 150,
                          height: 150,
                          foregroundDecoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                    snapshot.data.documents[index]['feedImage'],
                                  ),
                                  fit: BoxFit.fill)),
                        ),
                        Center(
                            child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(snapshot.data.documents[index]['title']),
                        )),
                      ],
                    )),
                  ),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Sorry Something went wrong!'));
          } else {
            return Center(
              child: SizedBox(
                child: CircularProgressIndicator(),
                width: 50,
                height: 50,
              ),
            );
          }
        }),
  );
}

【问题讨论】：

标签： asynchronous flutter dart

【解决方案1】：

您的FutureBuilder 将同时加载所有项目，但只会在屏幕上绘制ListView.builder 所需的数据。

【讨论】：

这是否意味着说我有很多数据可能是 100 个摘要，那么获取数据需要很长时间？我不希望在良好的互联网连接情况下获取时间超过 5 秒。
是的！如果您希望即使在最差的连接上加载时间也很短，您应该在需要时将数据作为部分加载。假设第一次加载 20 个摘要，当用户到达滚动结束时加载更多项目（更多 20）。 stackoverflow.com/questions/56323286/…