Flutter：ListView在开始时有间隙

Posted 2023-02-23

【中文标题】Flutter：ListView在开始时有间隙

【英文标题】：Flutter: ListView has gap at beginning

【发布时间】：2021-08-05 21:11:16

【问题描述】：

几个月前我开始使用 Flutter，并尝试实现我的第一个应用程序。该应用程序应显示一个简单的可滚动配置文件视图。 因此，我在 Scaffold 中使用了 ListView 来使屏幕可滚动。作为 ListView 的子项，我显示我想要显示的内容。

到目前为止，这工作正常。我面临的唯一问题是，listView 在 Scaffold 的开头（屏幕截图中的红色）和 ListView 的开头之间有一个奇怪的间隙。我认为这看起来不太好，想知道我是否可以解决这个问题？

我已经测试过这个问题是否与之前的填充有关，但是如果我将一个普通的 Text-Widget 添加到 Scaffold，它会显示在 Scaffold 的开头。

我的代码如下：

Scaffold(
  backgroundColor: Colors.red,
  body: Padding(
    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
    child: ListView(
      children: [
        Text('Status'),
        SizedBox(
          height: 10.0,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40.0),
          child: Container(
            child: Text(
              'Das hier ist ein Beispieltext disaidhasjdiojsaiodjisajdioajs',
              textAlign: TextAlign.center,
              style: Theme.of(context)
                  .textTheme
                  .headline3
                  .copyWith(fontStyle: FontStyle.italic),
            ),
          ),
        ),
        ... //More Widgets
       ],
    ),
  ),
)

【问题讨论】：

您在列表顶部添加了SizedBox(height: 10)。这导致了差距

【参考方案1】：

默认情况下，ListView 应用了一些填充，在官方文档中提到（https://api.flutter.dev/flutter/widgets/ListView-class.html）：

默认情况下，ListView 会自动填充列表的可滚动 四肢以避免由 MediaQuery 指示的部分障碍物 填充。为避免此行为，请使用零填充覆盖 属性。

如上所述，只需覆盖 ListView 内的填充值：

ListView(
  padding: const EdgeInsets.all(0), // or const EdgeInsets.symmetric(vertical: 0) for vertical padding only
  children: [...],
)

如果不是这样，我建议您检查是否真的需要 Scaffold 小部件来包装您的 ListView。

【讨论】：

是的...这正是我想要的！现在我在问自己，为什么我浪费了这么多时间来寻找我的代码中的错误。谢谢！