如何使用FutureBuilder获取可滚动的部件集，而不会出现溢出问题？

14 浏览
0 Comments

如何使用FutureBuilder获取可滚动的部件集，而不会出现溢出问题？

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

          FutureBuilder(
              future:
                  FirebaseFirestore.instance.collection('Assignments').get(),
              builder: (BuildContext context,
                  AsyncSnapshot 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....");
                }
              },
            ),

这是我在屏幕上得到的输出:

\"enter

我希望屏幕可以滚动。我已经使用了SingleChildScrollview，但是那会让整个屏幕都可以滚动，而我只希望“Assignment”标题下面的widget列表可以滚动。

admin 更改状态以发布 2023年5月22日
0

1 答案

0 Comments

您可以使用ListView替代多个Column。由于ListView是可以滚动的，所以您不应该遇到任何溢出小部件的问题。 ListView.Builder构造函数需要itemCount和一个builder，在其中您只需为每个ListItem返回一个小部件即可。

然后您的FutureBuilder如下所示:

FutureBuilder(
          future:
              FirebaseFirestore.instance.collection('Assignments').get(),
          builder: (BuildContext context,
              AsyncSnapshot 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),
                          Divide()
                        ],
                      );
                  },
              );
            } else {
              // or your loading widget here
              return Text("Loading....");
            }
          },
        ),

0