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

Posted 2023-02-23

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

【英文标题】：How should I get a scrollable set of widgets without overflow in case of FutureBuilder

【发布时间】：2022-01-16 04:34:39

【问题描述】：

我的代码中有一个 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 ，但这使得全屏可滚动，而我只希望“分配”标题下方的小部件列表可滚动。

【参考方案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....");
            
          ,
        ),

【讨论】：

我已经尝试过了，但它给了我这个错误：'垂直视口被赋予了无限的高度'

我已经尝试过 shrinkWrap: true 但在那种情况下溢出的问题仍然存在。

然后你可以将你的 FutureBuilder 包装在一个 Expanded 小部件中

扩展小部件的想法奏效了。但我很好奇为什么会发生这个错误。

由于此解决方案对您有效，我假设您的 FutureBuilder 位于 Column Widget 中。问题是 Column 和 ListView Widget 都在主轴方向展开到最大尺寸，所以 ListView 可以无边界展开。这里有更详细的解释：flutteragency.com/add-a-listview-to-a-column和***.com/questions/45669202/…