Flutter中ListView位于列表顶部时出现元素重叠问题求助

这不是Flutter的bug，而是ListView的默认绘制行为导致的问题，咱们来一步步拆解：

问题根源 #

你的ListView被包裹在Expanded组件中，获得了固定的布局空间，但ListView默认不会裁剪超出自身布局边界的内容。当列表滚动到顶部时，ListView的底部内容（或滚动时的overscroll效果）会超出Expanded分配的空间，覆盖下方的红色容器；而当你向下滚动一点后，ListView的可视区域回到了自身的布局边界内，重叠现象就消失了。

另外你使用的是Flutter v0.4.4这个比较早期的版本，当时的滚动组件在边界处理上确实有一些细节不如现在完善，但这个问题可以通过简单的代码调整解决。

修复方案 #

你只需要给ListView添加一个裁剪约束，确保它不会绘制超出自身布局范围的内容。有两种常用方式：

方式1：用ClipRect包裹ListView

把你的ListView放在ClipRect组件中，它会自动裁剪掉超出边界的部分：

new Expanded(
  flex: 10,
  child: new ClipRect( // 新增裁剪组件
    child: new ListView(
      children: <Widget>[
        new Card(child: new ListTile(title: new Text("a"))),
        new Card(child: new ListTile(title: new Text("b"))),
        new Card(child: new ListTile(title: new Text("c"))),
        new Card(child: new ListTile(title: new Text("d"))),
        new Card(child: new ListTile(title: new Text("e"))),
      ],
    ),
  ),
),

方式2：设置ListView的clipBehavior（适用于较新版本Flutter）

如果后续你升级了Flutter版本（建议升级，新版本修复了很多旧问题），可以直接给ListView设置clipBehavior属性：

new ListView(
  clipBehavior: Clip.hardEdge, // 裁剪超出边界的内容
  children: <Widget>[
    // ... 你的列表项
  ],
)

额外建议 #

1. 尽量升级到较新的Flutter稳定版，新版本不仅修复了很多布局细节问题，还提供了更多的API和性能优化。
2. 如果你的ListView内容高度不确定，也可以考虑设置shrinkWrap: true，让ListView根据内容高度自适应，但这种方式在内容较多时可能影响性能，需要根据实际场景选择。

内容的提问来源于stack exchange，提问作者Duncan Jones