时间戳

首页 > 解决方案 > Flutter：ListView在开始时有间隙

ios - Flutter：ListView在开始时有间隙

问题描述

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

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

我已经测试过这个问题是否与以前的填充有关，但是如果我向 Scaffold 添加一个普通的 Text-Widget，它会显示在 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
       ],
    ),
  ),
)

标签： iosflutterlistview

解决方案

默认情况下，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.

推荐阅读