如何在 Flutter 中使用 ListView 修复“底部溢出 XXX 像素”答案

【问题标题】：How to fix 'Bottom Overflowed by XXX pixels' with ListViews in Flutter如何在 Flutter 中使用 ListView 修复“底部溢出 XXX 像素”
【发布时间】：2019-12-25 20:46:47
【问题描述】：

我在固定高度为 300 的容器中使用 ListView(children:[])，但是当软键盘打开时，出现底部溢出错误。

底部溢出 123 像素

我是 Flutter 的新手，在学习教程时，我确实包装了第 2 列小部件，一个将 2 TextFields() 包装在一张卡片中，另一个将 height 属性设置为 300，使用 ' 包装一个 ListView() 小部件children :' 方法（如果我可以这样说，而不是 ListView.builder()）。

我尝试包装在 Expandable() 小部件中，但它仍然存在。只有当高度设置为 100 时，错误才会真正消失，但随后我得到了一个很小的可滚动部分。有什么办法可以绕过还是这是正常反应？

注意：我还尝试了此处显示的所有适用于我的情况的解决方案，但没有一个对我有用。

Flutter: how to fix bottom overflow

这是我的专栏

 return Column(
      children: <Widget>[
        NewTransaction(_addNewTransaction),
        TransactionList(_userTransaction),
      ],
    );

NewTransaction() 包含 TextFields 并且工作正常，

这是我包装 ListView 的容器（代码已被简化以提高可见性）

return Container(
      height: 300,
      child: ListView(
          children: [
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
               Container(
                   height: 200,
               ),
          ],
      ),
);

通常当软键盘打开时，它不应该显示任何底部溢出错误，但它会显示。在我遵循的教程中，它没有问题，但后来我得到了一个

底部溢出 123 像素。

错误

Here's a screenshot of the result

【问题讨论】：

将Column 包裹在SingleChildScrollView 中
您的预期结果是什么？为什么容器高度必须是 300？

标签： listview flutter height

【解决方案1】：

对于底部溢出，将容器或列包裹在一个 SingleChildScrollView 小部件中。或者您可以将整个 body: 函数的属性放在一个 singlechildScrollView 中。您还可以增加容器的高度。例如：

 `return SingleChildScrollView(
    child: Container(
    height: 300,
      child: ListView(
      children: [
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
           Container(
               height: 200,
           ),
         ),
         ],
         ),
       );  `

【讨论】：