在 FutureBuilder 的情况下，我应该如何获得一组可滚动的小部件而不会溢出

Question

我的代码中有一个 FutureBuilder，它根据从 Firestore 获取的数据生成一个小部件列表。我希望屏幕可以滚动而没有任何溢出错误。这是我的代码：

          FutureBuilder<QuerySnapshot>(
              future:
                  FirebaseFirestore.instance.collection('Assignments').get(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasData) {
                  return Column(
                    children: snapshot.data?.docs.map((doc) {
                          return Column(
                            children: [
                              Subject(
                                  dataMap: doc.data() as Map<dynamic, dynamic>),
                              Divide()
                            ],
                          );
                        }).toList() ??
                        [],
                  );
                } else {
                  // or your loading widget here
                  return Text("Loading....");
                }
              },
            ),

这是我在屏幕上看到的输出：

我希望这个屏幕可以滚动。我使用了 SingleChildScrollview ，但这使得全屏可滚动，而我只希望“分配”标题下方的小部件列表可滚动。

Answer 1

您可以使用一个ListView 而不是多个Column。 ListView 是可滚动的，因此您不会遇到溢出小部件的任何问题。 ListView.Builder 构造函数采用 itemCount 和 builder，您只需在其中为每个 ListItem 返回一个小部件。

那么您的 FutureBuilder 将如下所示：

FutureBuilder<QuerySnapshot>(
          future:
              FirebaseFirestore.instance.collection('Assignments').get(),
          builder: (BuildContext context,
              AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  itemCount: snapshot.data.docs.length,
                  itemBuilder: (context, index) {
                     return Column(
                        children: [
                          Subject(
                              dataMap: snapshot.data.docs[index].data() as Map<dynamic, dynamic>),
                          Divide()
                        ],
                      );
                  },
              
              );
            } else {
              // or your loading widget here
              return Text("Loading....");
            }
          },
        ),