如何从 ListView 中删除自动 SafeArea？答案

【问题标题】：How to remove automatic SafeArea from ListView?如何从 ListView 中删除自动 SafeArea？
【发布时间】：2018-08-30 21:24:22
【问题描述】：

我刚刚添加了一个 ListView 作为Scaffold > Stack 的子视图，它的顶部似乎有 SafeArea。列不存在这个问题。有什么办法可以去掉吗？

Container(
  color: Colors.grey[100],
  child: ListView(
    children: <Widget>[
      Image(
        image: snapshot.data.hero,
        height: 300.0,
        fit: BoxFit.cover,
      ),
    ],
  ),
),

列表视图

栏目

【问题讨论】：

仅供参考github.com/flutter/flutter/issues/21236

标签： flutter

【解决方案1】：

来自ListView 文档：

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

所以解决方法是：

ListView(
  padding: EdgeInsets.zero,
  ...
);

【讨论】：

这个也隐藏状态栏吗？
@B.shruti 这不会隐藏状态栏，它仍然在顶部

【解决方案2】：

也找到了这个解决方案

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

【讨论】：

多亏了这个解决方案，我已经能够重置由外部包的小部件添加的顶部填充。此小部件在其代码中使用 SafeArea，因此即使没有必要，它也会自动添加一些填充。

【解决方案3】：

这显然是正确的答案：

padding: EdgeInsets.zero

但我只是想添加一些关于此问题的附加信息，这些信息对我自己有帮助。

如果你不提供填充，它会自动使用 MediaQuery.of(context).padding 的部分内容

例如，在 vertical 列表视图中，默认填充是这样的：

final EdgeInsets mediaQueryVerticalPadding =
        mediaQuery.padding.copyWith(left: 0.0, right: 0.0);

这意味着如果你想在一个部分保留默认行为并更改其他值，你应该使用这样的东西。

例如，只保留 MediaQuery 的顶部填充并编辑其余部分：

ListView(
    padding: MediaQuery.of(context).padding.copyWith(
        left: 0,
        right: 0,
        bottom: 50,
    ),
    ...
),

【讨论】：